Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CMS
Webdesign

Menyiapkan Full Client Side Blog dalam Beberapa Menit dengan CMS.js

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Biasanya, ketika kita mulai membuat blog baru, ada tingkat kompleksitas tertentu yang harus dipertimbangkan. Apa jenis database yang akan Anda butuhkan? Akankah Anda membutuhkan PHP, Node.js, mySQL? Bagaimana Anda mengelola keamanan database dan area admin Anda? Apa yang akan Anda jadwalkan ketika pemeliharaan untuk update plugin dan tema?

Jika semua yang Anda butuhkan adalah sebuah blog yang sederhana, kompleksitas semacam ini dapat berlebihan. Namun dengan CMS.js, Anda dapat menyisihkan itu semua dan memiliki sebuah blog yang sederhana, full client-side tanpa kekhawatiran lainnya. Dan Anda dapat mengaturnya dalam beberapa menit.

Dalam tutorial ini kita akan mulai dengan cepat melihat seperti apakah CMS.js, maka Anda akan belajar persis bagaimana untuk menyelesaikan proses menyiapkannya dengan cepat. Setelah Anda memiliki situs yang dapat berjalan, kita akan pergi melalui cara menambahkan dan menghasilkan konten. Mari kita mulai!

Apakah CMS.js?

CMS.js adalah site generator yang sangat ringan ditulis dalam JavaScript. Secara out of the box dia hanya berukuran 94 Kb, terdiri dari hanya enam belas file. Sebagai perbandingan, WordPress berukuran sekitar 24Mb dan lebih dari 1.400 file.

Didesain dengan "semangat Jekyll", yang pada dasarnya berarti Anda dapat menulis posting dan halaman dalam bentuk file teks Markdown dan mereka secara otomatis diproses dan output ke dalam blog format.

Seperti Jekyll, dengan CMS.js Anda dapat memiliki host (gratis) pada GitHub Pages untuk situs Anda. Dengan opsi ini CMS.js akan menggunakan API di GitHub untuk secara dinamis mengambil file Markdown dari repositori Anda dan menyajikan mereka sebagai posting dan halaman. Hal ini dikenal sebagai "GitHub Mode", dan itu adalah yang pertama dari dua mode yang tersedia di CMS.js.

Ngomong-ngomong, jika Anda familiar dengan kata mode, namun tidak akrab dengan Github, jangan khawatir. Kami akan menunjukkan Anda bagaimana untuk menggunakannya dengan cara sedemikian rupa sehingga Anda akan nyaman bahkan jika Anda tidak pernah menyentuh git sebelumnya dalam hidup Anda. Selain itu, jika Anda memilih hosting Anda sendiri, Anda dapat menggunakan "Server Mode" sebagai gantinya.

Opsi 1: Server Mode

Mode ini adalah yang paling sederhana, jadi mari kita melangkah melalui cara menggunakannya sebagai opsi yang pertama.

Download dan Ekstrak CMS.js

Hal pertama yang Anda harus lakukan adalah men-download CMS.js. Pergi ke https://github.com/cdmedia/cms.js dan klik tombol hijau Clone or download di sebelah kanan atas, kemudian pilih Download ZIP.

Catatan: dengan proses ini kita akan berasumsi bahwa Anda tidak ingin menggunakan GitHub sama sekali, itulah sebabnya kita sedang hanya memilih men-download ZIP dari CMS.js, dibanding kloning repo. Namun jika Anda lebih memilih untuk clone repo dengan metode Anda sendiri Anda pasti bisa melakukannya.

Jika tidak, setelah Anda memiliki ZIP yang ter-download, ekstrak dan Anda akan melihat isi seperti ini:

Mengedit pengaturan konfigurasi

Sekarang pergi ke folder "js" dan buka file "config.js" untuk mengedit. Temukan pengaturan mode, (di baris 52 pada rilis saat ini), dan mengubahnya dari 'Github' ke 'Server'.

Anda juga akan melihat pengaturan untuk nama situs, tagline situs, alamat email situs Anda dan nama penulis situs, sehingga ini merupakan waktu yang baik untuk mengubah hal itu.

Mengedit Item Nav (Opsional)

Jika Anda sudah tahu item Anda yang ingin muncul di nav menu Anda dapat mengedit siteNavItems, untuk menetapkannya sekarang juga.

Nilai yang ditetapkan dengan properti name akan menentukan label yang muncul pada item menu Anda. Properti href memungkinkan Anda untuk menentukan URL yang Anda inginkan pada link di item nav. Properti newWindow menentukan apakah link akan membuka di jendela baru ketika diklik.

Jika Anda ingin link ke halaman internal tinggalkan properti href dan newWindow dan hanya gunakan properti name dengan nilai yang ditetapkan untuk judul halaman (lebih lanjut mengenai bagaimana judul halaman bekerja di bagian selanjutnya). Ini akan secara otomatis mengatur permalink nav item dengan format  #page/<name>

Jika halaman internal Anda inginkan menggunakan spasi dalam judul, seperti "About Me", gunakan spasi pula pada properti name, misalnya name: 'About Me'

Transfer ke Server

Untuk melihat situs Anda ketika Anda berada dalam "server mode" Anda akan perlu untuk mentransfer ke server yang menggunakan Apache atau NGINX. Anda dapat meng-upload langsung ke web hosting melalui klien FTP pilihan Anda jika Anda menginginkannya, tapi itu umumnya lebih baik untuk bekerja pada hal-hal yang offline pertama dan meng-upload mereka ketika Anda sudah selesai. Dengan demikian, saya sarankan menggunakan sebuah program untuk membuat offline server dan bekerja di dalamnya.

Untuk tutorial ini kita akan menggunakan MAMP, yang tersedia untuk Mac dan Windows, tetapi jika Anda sudah menggunakan dan memilih pilihan lain seperti XAMPP, itu sama saja.

Dalam folder instalasi "htdocs" pada MAMP, buat folder baru bernama "cms_js", (atau apa pun yang Anda suka), untuk penempatan situs CMS.js offline:

Salin semua file CMS.js ke dalam folder ini:

Dan itu saja, situs Anda akan berjalan dan siap untuk pergi!

Untuk melihatnya pergi ke URL offline untuk situs Anda, (seperti yang disediakan oleh MAMP), misalnya http://localhost:8888 cms_js

Opsi 2: GitHub Mode

Dengan "GitHub mode" Anda dapat memiliki situs CMS.js dengan host gratis di GitHub Pages, dan Anda dapat mengelola situs Anda melalui repositori GitHub yang menyimpan konten Anda.

Dengan GitHub Pages, Anda dapat memiliki jumlah situs gratis yang tidak terbatas; satu situs "utama" per akun, dan kemudian juga satu situs per proyek/repositori. Namun Waspadalah bahwa akun GitHub gratis biasanya digunakan untuk sumber terbuka, proyek yang dibagikan sehingga repositori Anda, (termasuk mereka dengan situs-situs yang terkait), tidak pribadi.

Catatan: Jika Anda belum memiliki akun GitHub, silahkan mendaftar di: https://github.com/join

Untuk menjaga hal-hal tetap berjalan lancar sebaik mungkin, kita akan menggunakan GitHub Desktop untuk proses ini. Jika Anda tidak memiliki GitHub Desktop silahkan Anda ambil di sini: https://desktop.github.com/

Jika Anda akrab dengan baris perintah git dan Anda ingin menggunakannya sebagai gantinya, itu juga akan bekerja sama baiknya, tetapi ingatlah tutorial tidak akan mencakup penggunaan baris perintah pada setiap tahap.

Fork Repo CMS.js

Pergi ke repositori CMS.js dan klik ikon Fork disebelah kanan atas. Ini akan membuat repositori baru di akun Anda dengan semua file CMS.js disalin ke dalamnya.

Bila Anda menggunakan URL GitHub Pages, situs Anda akan menarik dari repo dengan Anda nama, yaitu http://<username>.github.io/<repo_name>. Untuk alasan ini, ada baiknya Anda mengganti nama proyek yang baru saja Anda ganti dari nama defaultnya "CMS.js".

Pergi ke tab Settings, isi nama baru ke dalam bidang  Repository name kemudian klik Rename.

Clone Repo Anda

Kembali ke tab Code dan klik tombol hijau Clone or download, seperti yang kita lakukan selama menyiapkan Server Mode. Tapi kali ini, pilih Open in Desktop.

GitHub Desktop akan terbuka dan Anda akan diminta untuk memilih lokasi yang Anda inginkan untuk mengkloning. Ini akan menjadi folder Anda bekerja secara offline untuk mengelola situs Anda, sehingga pilih lokasi yang diinginkan, kemudian klik Clone. Semua file CMS.js akan ditarik ke lokasi Anda tentukan, dan siap untuk digunakan.

Pengaturan Cabang gh-pages

Hal berikutnya yang Anda perlukan adalah cabang gh-pages di repo yang di clone oleh Anda, karena ini adalah cabang GitHub API akan menarik konten dari dan oleh karena itu adalah yang Anda butuhkan untuk bekerja pada situs Anda. Namun repo CMS.js sudah memiliki cabang gh-pages yang digunakan untuk halaman proyek sendiri sehingga kita harus menghapus untuk yang pertama itu.

Beralih dari cabang master ke dalam cabang gh-pages.

Pergi ke menu Branch dan pilih Delete 'gh-pages', kemudian konfirmasikan dengan mengklik  di kotak dialog yang muncul.

Sekarang Anda bebas untuk membuat cabang gh-pages Anda sendiri. Klik tombol ikon kecil cabang, ketik "gh-pages" ke dalam bidang nama kemudian klik Create Branch.

Setelah ini selesai, klik tombol Publish di kanan atas untuk mendapatkan cabang gh-pages yang baru Anda buat secara online.

Anda sekarang memiliki cabang gh-pages Anda sendiri, dalam Anda sendiri yang di clone dari CMS.js, dan Anda siap untuk pergi.

Mengedit Pengaturan Konfigurasi

Di Finder, atau Windows Explorer, pergi ke folder tempat Anda melakukan clone.

Tip: klik kanan pada nama repo di kolom kiri dan pilih Open in Finder atau Open in Explorer.

Dari sini, Anda harus mengikuti langkah berikutnya yang sama ketika menggunakan "Server Mode", dalam hal untuk mengedit pengaturan konfigurasi. Pergi ke folder "js" dan buka "config.js" untuk mengedit.

"mode" sudah ditetapkan ke 'Github' secara bawaan sehingga Anda tidak perlu mengedit pengaturan untuk itu. Namun Anda akan perlu untuk mengedit githubUserSettings, (baris 55 pada rilis saat ini).

Atur nilai untuk nama pengguna GitHub, dan yang kedua untuk nama repo yang baru saja dibuat (yang di fork).

Seperti yang kita lakukan dengan "Server Mode" Anda juga harus mengedit nama situs, tagline situs, alamat email situs, dan pengaturan nama situs penulis.

Jika Anda ingin mengatur item nav Anda sekarang, silakan merujuk ke bagian "Edit Item Nav (Opsional)" yang ada pada bagian sebelumnya dalam tutorial ini.

Commit & Singkronasi Perubahan Anda

Sekarang kembali ke GitHub Desktop dan Anda akan melihat tombol 1 Uncommitted Change. Hal ini karena GitHub Desktop telah mendeteksi Anda modifikasi dari "config.js" file. Jika Anda menekan tombol yang bersangkutan dan melihat tubuh kode di bawah ini, Anda akan lihat sorotan hijau pada perubahan Anda telah membuat.

Lihat sekilas pada perubahan yang Anda buat dan, setelah Anda menyukainya, isi formulir kecil di bagian kiri bawah dengan deskripsi dasar tentang perubahan yang Anda lakukan.

Kemudian klik Commit to gh-pages. Setelah selesai, klik tombol Sync di bagian kanan atas, (di mana tombol Publish sebelumnya), untuk mendapatkan perubahan yang baru saja Anda lakukan pada repo yang telah Anda upload.

Anda dapat memeriksa apakah perubahan pada file konfigurasi Anda telah berhasil diupload dengan membuka halaman web untuk cabang repo gh-pages Anda dan mencari tahu apakah pesan komit Anda telah muncul di sana:

Sekarang situs Anda sudah siap untuk di lihat! URL Anda akan berformat http://<username>.github.io/<repo_name>, misalnya untuk situs yang saya buat pada tutorial ini, URL-nya adalah: https://kezzbracey.github.io/5_minute_blog/

Pergi ke URL situs Anda dan saksikanlah!

Menambahkan Konten

Setelah situs CMS.js Anda aktif dan berjalan, Anda dapat mulai menambahkan konten ke dalamnya dalam bentuk halaman dan posting. Kedua hal ini ditambahkan dengan membuat file Markdown (.md) di dalam folder "pages" dan "posts" di situs Anda masing-masing.

Perlu disadari di sini bahwa jika Anda ingin menggunakan inline HTML, untuk tugas seperti menambahkan video ke pos, Anda harus mengubah pengaturan Markdown untuk situs Anda. Pada akhir "config.js" Anda akan menemukan pengaturan ini:

Rubah  sanitize dari true ke false untuk mengijinkan HTML inline. Jika Anda tidak mengubah pengaturan ini setiap inline HTML hanya akan ditampilkan sebagai teks biasa.

Menambahkan Pos

Untuk menambahkan pos, buat file Markdown (.md) di dalam folder "posts" dan beri nama dengan format yang mengkombinasikan tanggal dan judul seperti ini: YYYY-MM-DD_post-title.md. Pastikan tanggal dan judul dipisahkan dengan garis bawah.

Misalnya, "2016-08-06_five-minute-blog-setup.md".

Di bagian atas file, Anda harus menambahkan beberapa front matter yang menentukan judul posting, lalu di bawah jenis itu adalah konten pos Anda misalnya.

Memigrasikan Postingan Jekyll

Jika Anda ingin untuk bermigrasi dari situs Jekyll, menyalin semua postingan Anda dari folder "_posts" ke situs CMS.js di folder "posts". Jika posting Anda memiliki gambar di dalamnya pastikan untuk membawa folder yang membawa itu.

Catatan: Pastikan ekstensi file dari postingan Anda adalah ".md" tidak ".markdown".

Menambahkan Halaman

Untuk menambahkan halaman buat file Markdown (.md) dalam folder "pages". Anda tidak perlu tanggal dalam nama file halaman, namun nama file harus cocok dengan judul yang digunakan dalam front matter. Juga harus ada tanda hubung dalam nama file yang sesuai dengan spasi pada judul halaman.

Misalnya berkas dengan nama "about-me.md" harus  memiliki front matter ini:

Untuk mengulang apa yang telah kami sebutkan sebelumnya, jika Anda ingin menautkan ke halaman dari menu nav situs Anda, properti name yang digunakan di situs file configNavItems Anda harus cocok dengan judul halaman tersebut, dengan spasi disertakan:

Memigrasikan Halaman Jekyll

Jika Anda bermigrasi dari situs Jekyll Anda dapat menyalin semua halaman Anda dari root folder ke folder "pages" situs CMS.js Anda. Berikan perhatian Anda masing-masing sekilas untuk memastikan judul sesuai dengan nama file seperti yang dijelaskan di atas, dan ekstensi file adalah ".md" bukan ".markdown".

Deploy Konten Baru dalam Server Mode

Mendapatkan konten baru Anda secara online dalam server mode hanyalah masalah mengunggah file yang baru ditambahkan ke host Anda melalui klien FTP pilihan Anda.

Catatan: sepertinya mengupdate konten yang ada saat berada di "Server Mode" bisa menjadi sedikit rumit saat ini, dengan suntingan tidak muncul dalam konten atau menyebabkan konten hilang bersamaan. Jika Anda bekerja di "Server Mode", saat ini taruhan terbaik adalah menyiapkan file pos Anda di tempat lain lalu mentransfernya ke folder "posts" Anda saat Anda yakin telah selesai.

Deploy Konten Baru dalam Mode GitHub

Mendapatkan konten baru secara online sebenarnya sedikit lebih mudah dikelola di "GitHub Mode" karena Anda tidak perlu melacak secara manual file yang Anda tambahkan atau ubah. Sebagai gantinya, Anda bisa masuk ke GitHub Desktop dan secara otomatis akan mendeteksi file yang ditambahkan atau diubah.

Dari sana, ikuti proses yang sama yang Anda lakukan ketika Anda mengedit file konfigurasi.

  1. Membuat pesan komit
  2. Mengkomit perubahan
  3. Sinkronisasi

Catatan: konten baru harusnya segera muncul, namun setelah mengedit konten yang ada, Anda mungkin harus menunggu sebentar sebelum melihat perubahan di situs Anda.

Bonus: Konversi Tema Jekyll

Mengingat CMS.js ada dalam rasa Jekyll, Anda akan menemukan banyak tema Jekyll akan sesuai dengan situs CMS.js dengan cukup baik. Dengan demikian dimungkinkan untuk sebagian mengkonversi tema Jekyll untuk digunakan pada situs Anda. Jekyll memiliki fungsi yang CMS.js tidak, jadi Anda tidak dapat sepenuhnya mengusung semua fitur dari beberapa tema Jekyll, namun Anda dapat menampilkan tampilan dan nuansa yang bagus.

Melengkapi proses ini akan membuat beberapa keakraban dengan HTML, CSS, dan JavaScript, jadi jika Anda merasa nyaman dengan ketiga bahasa ini, ubahlah tema yang diinginkan. Melalui langkah-langkah konversi yang tepat berada di luar cakupan tutorial ini, namun proses dasarnya adalah:

  • Salin stylesheet dari tema Jekyll Anda ke folder "css" situs CMS.js Anda dan tautkan di bagian <head> pada "index.html" file. Pastikan untuk menautkan stylesheet eksternal yang diperlukan juga, seperti Google Fonts atau Font Awesome.
  • Bandingkan template dari tema Jekyll "_layouts" dan "_includes" pada kode pada CMS.js di "index.html" file. Perhatikan bahwa template postingan, halaman dan error disimpan dalam cuplikan JavaScript di dalamnya.
  • Salin markup dan class CSS yang sesuai dari template Jekyll ke CMS.js "index.html" file. Perhatikan, karena Anda melakukan ini, penting untuk tidak menghapus nama kelas yang Anda lihat dalam template JavaScript yang ada karena memungkinkan sistem menyuntikkan konten ke lokasi yang sesuai.
  • Salin file JavaScript yang diperlukan dari tema Jekyll ke situs CMS.js dan muatkannya di bagian bawah "index.html" file atau di <head>, tergantung pada kebutuhan skrip.

Dalam contoh ini saya telah mengubah tema "Astro" untuk Jekyll dan menerapkannya ke situs CMS.js ini:

Penutup

Dan hanya itu yang perlu dilakukan untuk menyiapkan blog CMS.js! Jika Anda tidak membutuhkan lonceng dan peluit dan hanya menginginkan cara langsung untuk mendapatkan blog secara online, metode ini akan membawa Anda ke sana dengan cepat.

Terima kasih banyak kepada Chris Diana, pencipta CMS.js, karena telah menciptakan alat hebat ini dan membagikannya dengan bebas.

 Saksikan CMS.js untuk diri sendiri dan mengambil untuk memulai; Anda mungkin menemukan platform blogging favorit baru!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.