handmade blog

✍️

Blog Buatan Tangan

Baca dokumen ini dalam bahasa lain: ?? ?? ?? ?? ?? ?? ??

Blog Buatan Tangan adalah generator blog statis ringan untuk orang yang ingin memulai blog dengan cepat. Ini mendukung dokumen jenis artikel untuk posting blog, dokumen jenis pekerjaan untuk portofolio, sorotan kode, sintaksis KaTeX, catatan kaki, dan banyak lagi.

Demo: Di sini

Memamerkan

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

Hasil mercusuar

article/0.html di ponsel

article/0.html di desktop

Memulai

1. Klik tombol 'Gunakan templat ini' di atas daftar file untuk membuat repositori baru. Jika Anda ingin menggunakan domain github.io, harus memberi nama repositori {YOUR_ID}.github.io . (misal, betty-grof.github.io ) Jangan lupa aktifkan opsi 'Sertakan semua cabang'.

   

   

2. Klik tab 'Pengaturan' di repositori Anda, dan atur cabang sumber untuk Halaman GitHub ke cabang gh-pages . Halaman GitHub akan menghosting situs web Anda berdasarkan cabang gh-pages . Anda akan dapat mengakses situs web melalui https://{YOUR_ID}.github.io/ dalam beberapa menit.

   

   

3. Kloning repositori, dan instal paket node.

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

4. Sesuaikan beberapa teks seperti judul navigasi (di app/templates/navigations.ejs ), dan jalankan npm run build .

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. Jalankan skrip npm start untuk memulai mendengarkan server lokal di http://localhost:8080/ . Server lokal didasarkan pada direktori dist .

   $ npm run build
   $ npm start

   

6. Komit dan dorong perubahan di direktori kerja Anda ke repositori jarak jauh.

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. Jalankan skrip deploy jika Anda siap menghosting situs web. Skrip ini membuat file lokal ke direktori dist dan mendorongnya ke cabang gh-pages yang hanya berisi file di direktori dist . Halaman GitHub akan menghosting situs web Anda di https://{YOUR_ID}.github.io/ berdasarkan cabang gh-pages secara otomatis.

   $ npm run deploy

Penggunaan

Muat ulang langsung

1. Jalankan npm run watch untuk melacak perubahan secara real time.
2. Jalankan npm start untuk memulai server lokal. ( npm run watch harus tetap berjalan di latar belakang atau tab lain, atau sesi lain.)
3. Sekarang, ini dibuat secara otomatis setiap kali Anda membuat perubahan pada file apa pun di direktori app/templates , app/styles , dan _articles .

Menulis dan menerbitkan dokumen

1. Tulis dokumen di direktori _articles atau _works .
2. Jalankan npm run publish article atau npm run publish work untuk mengonversi dokumen penurunan harga menjadi HTML.
3. Pratinjau dokumen yang dikonversi di server lokal menggunakan skrip npm start .
4. Komit dan dorong perubahan ke repositori, dan jalankan npm run deploy untuk menerapkan.

Mengedit templat

Ubah template ejs untuk mengubah konten halaman yang ada. Misalnya, jika Anda ingin meletakkan gambar ke halaman arahan, buka file app/templates/index.ejs , dan tambahkan tag img ke elemen main-container .

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

Kemudian, jalankan skrip npm run build untuk mempublikasikan halaman arahan yang dimodifikasi dan melihat pratinjau perubahan di server lokal menggunakan skrip npm start .

$ npm run build
$ npm start

Jika Anda siap untuk menerapkan, jalankan skrip npm run deploy . Anda tidak hanya dapat mengubah halaman arahan tetapi halaman mana pun seperti ini. (Anda mungkin perlu memahami struktur proyek.)

Menambahkan domain khusus

Buat file CNAME di direktori root. Proses pembuatan akan secara otomatis mengambil CNAME untuk Anda dan Anda dapat menyajikan blog Anda dari domain khusus Anda.

Untuk mengetahui lebih lanjut tentang cara Github mengelola CNAME, lihat dokumennya

Struktur proyek

• _articles - File penurunan harga untuk postingan blog.
• _works - File penurunan harga untuk portofolio.
• app
  • assets - File apa pun yang akan diimpor oleh file HTML seperti gambar, font, dll.
  • public - File HTML yang dihasilkan oleh skrip publish . direktori server dan dist didasarkan 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 .
  • styles - kode sumber CSS untuk diimpor oleh file HTML.
  • static - File statis apa pun yang tidak dikompilasi oleh skrip build seperti file robots.txt , sitemap.xml , atau SEO. skrip build menyalin semua file di bawah direktori ini ke direktori dist .
  • templates - file templat EJS. skrip publish mengonversi templat di bawah direktori ini menjadi file HTML.
• dist - File yang dikompilasi dengan skrip build . skrip start membuka server lokal berdasarkan direktori ini, dan skrip deploy menyebarkan situs web ke halaman GitHub berdasarkan direktori ini. Jangan mengubah file di bawah direktori ini secara langsung.
• services - Kode sumber yang mengimplementasikan skrip publish .
  • classes
  • models
• tools - Kode sumber yang mengimplementasikan berbagai skrip npm.

Skrip yang Tersedia

npm start

Mulai mendengarkan server pengembangan lokal di http://localhost:8080/.

npm run publish

Mengonversi templat menjadi file HTML.

$ npm run publish article

Mengonversi semua artikel.

$ npm run publish works

Mengonversi semua karya.

$ npm run publish article 5

Mengonversi artikel yang idnya 5.

$ npm run publish work 3

Mengonversi karya yang idnya 3.

$ npm run publish page

Mengonversi semua halaman.

npm run watch

Membangun kembali file templat di direktori templates , file css di direktori styles , dan file penurunan harga di direktori _articles secara otomatis setiap kali file diubah.

npm run build

Membangun file dengan bundler paket.

npm run deploy

Membangun dan menyebarkan file.

Lisensi

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