README-ID.md

✍️

Handmade Blog

Handmade Blog adalah generator blog statis klasik untuk orang yang ingin memulai blog dengan cepat. mendukung dokumen jenis artikel untuk posting blog, dokumen jenis pekerjaan untuk portofolio, code highlights, KaTeX syntax, footnotes, dan lainnya.

Demo: Klik disini

Panduan memulai

1. Klik tombol 'Use this template' di atas daftar file untuk membuat repositori baru. Jika Anda ingin menggunakan domain github.io, maka beri nama repositori anda seperti ini {ID_ANDA}.github.io. (cth., betty-grof.github.io) Jangan lupa untuk mengaktifkan opsi 'Include all branches'.

   

   

2. Klik tab 'Settings' di repositori Anda, dan atur source branch untuk GitHub Pages ke branch gh-pages. GitHub Pages akan menghosting situs Anda berdasarkan branch gh-pages. Anda dapat mengakses situs web melalui https://{ID_Anda}.github.io/ dalam beberapa menit.

   

   

3. Clone repositori, dan instal node packages.

   $ git clone https://github.com/{ID_ANDA}/{NAMA_REPOSITORI}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {NAMA_REPOSITORI} # cd betty-grof.github.io
   $ npm install

4. Modifikasi file config.json di direktori services untuk mengatur title (judul) dan subtitle (subjudul) blog Anda.

   {
     "blogTitle": "Betty Grof",
     "blogSubtitle": "Oh My Glob",
     "article": {
       "tableOfContents": true 
     }
   }

5. Start server lokal di http://localhost:1234/. jalankan script npm start membuka server lokal berdasarkan direktori server.

   $ npm start

   

6. Commit dan push perubahan dalam working directory (direktori kerja) Anda ke remote repository.

   $ git add ./services/config.json
   $ git commit -m "Mengatur title dan subtitle blog"
   $ git push origin master

7. Jalankan script deploy jika Anda siap untuk menghosting live server. Script ini membangun file lokal ke direktori dist dan mem-push ke branch gh-pages yang hanya berisi file dalam direktori dist. GitHub Pages akan menghosting live server di https://{ID_ANDA}.github.io/ berdasarkan branch gh-pages secara otomatis.

   $ npm run deploy

Penggunaan

Menulis dan menerbitkan dokumen

1. Tulis dokumen di direktori _articles atau _works.

2. Jalankan script npm run publish article atau npm run publish work untuk mengonversi dokumen markdown (md) menjadi HTML.

3. Preview dokumen yang dikonversi di server lokal menggunakan script npm start.

4. Commit dan push perubahan ke repositori, dan jalankan npm run deploy untuk menerbitkan dokumen ke live server.

Mengubah halaman

Modifikasi template ejs untuk mengubah konten halaman yang ada. Misalnya, jika Anda ingin meletakkan gambar ke landing page, buka file ʻapp/templates/index.ejs dan tambahkan tag ʻimg ke element main-container.

<main id="main-container">
  <img src="../assets/profile.jpg" alt="Foto profil saya" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>

Kemudian, jalankan skrip npm run publish page untuk mempublikasikan landing page yang telah dimodifikasi.

$ npm run publish page

Selesai! Anda tidak hanya dapat mengubah landing page tetapi page apa pun seperti ini. (Anda mungkin perlu memahami struktur project.)

Struktur project

• _articles - File markdown untuk posting blog.
• _works - File markdown untuk portofolio.
• app
  • assets - File apa pun yang akan diimpor oleh file HTML seperti gambar, font, dll.
  • public - File HTML yang dihasilkan oleh script publish. Direktori server dan dist berdasar pada direktori ini. Jangan mengubah file di bawah direktori ini secara langsung.
    • article - File HTML dikonversi dari direktori _articles.
    • work - File HTML dikonversi dari direktori _works.
  • src - Source code untuk diimpor oleh file HTML.
    • css - File CSS yang dihasilkan oleh script build.
    • scss
    • ts
  • static - File statis apa pun yang tidak dikompilasi oleh script build seperti robots.txt, sitemap.xml, atau file SEO. Script build menyalin semua file di bawah direktori ini ke direktori dist.
  • templates - File HTML digunakan sebagai template ejs. Script publish mengonversi file markdown menjadi HTML berdasarkan template di bawah direktori ini.
• dist - File dikompilasi oleh script build. script deploy mendeploy situs web ke GitHub Pages berdasarkan direktori ini. Jangan mengubah file di bawah direktori ini secara langsung.
• server - File dikompilasi oleh script build. Script start membuka server lokal berdasarkan direktori ini. Jangan mengubah file di bawah direktori ini secara langsung.
• services - Source code menerapkan script publish.
  • classes
  • models
• tools - Source code menerapkan berbagai npm script.

Showcase (Contoh kasus)

• parksb.github.io: https://github.com/parksb/parksb.github.io
• betty-grof.github.io: https://github.com/betty-grof/betty-grof.github.io

Script yang Tersedia

npm start

Memulai local development server di http://localhost:1234/.

npm run publish

Mengonversi template ke file HTML.

$ npm run publish article

Mengonversi semua artikel.

$ npm run publish works

Mengonversi semua karya.

$ npm run publish article 5

Mengonversi artikel dengan id 5.

$ npm run publish work 3

Mengonversi karya dengan id 3.

$ npm run publish page

Mengonversi semua halaman.

npm run watch

Membangun kembali file template di direktori templates dan file markdown di direktori _articles secara otomatis setiap kali file diubah.

npm run build

Builds file dengan parcel bundler.

npm run deploy

Build dan deploy file.

Lisensi

Proyek ini berlisensi di bawah Lisensi MIT - lihat file LISENSI untuk detailnya.