Beralih Dari WordPress Ke Hugo

Ketika WordPress 5 dirilis, saya senang memanfaatkan editor Gutenberg untuk membuat blok khusus, karena posting di blog pribadi saya memiliki beberapa fitur yang dapat saya ubah menjadi blok, membuatnya lebih mudah untuk mengatur konten saya. Itu pasti hal yang keren untuk dimiliki, namun masih terasa cukup kembung.

Sekitar waktu yang sama, saya mulai membaca lebih banyak tentang generator situs statis dan JAMstack ( artikel ini oleh Chris Ferdinandi meyakinkan saya ). Dengan proyek sampingan pribadi, Anda dapat mengabaikan berbagai macam masalah, tetapi sebagai seorang profesional, Anda harus memastikan bahwa Anda menghasilkan kualitas terbaik. Performa, keamanan, dan aksesibilitas menjadi hal pertama yang harus dipikirkan. Anda pasti dapat mengoptimalkan WordPress menjadi cukup cepat, tetapi lebih cepat daripada situs statis di CDN yang tidak perlu menanyakan database atau membuat halaman Anda setiap saat? Tidak begitu mudah.

Saya pikir saya dapat mempraktikkan ini dengan proyek pribadi saya untuk dipelajari dan kemudian dapat menggunakannya untuk proyek profesional, dan mungkin beberapa dari Anda juga ingin tahu caranya. Pada artikel ini, saya akan membahas bagaimana saya melakukan transisi dari WordPress ke generator situs statis tertentu bernama Hugo.

Hugo dibangun di Go , yang merupakan bahasa yang cukup cepat dan mudah digunakan setelah Anda terbiasa dengan sintaksnya, yang akan saya jelaskan. Semuanya dikompilasi secara lokal sehingga Anda dapat melihat pratinjau situs Anda langsung di komputer Anda. Proyek kemudian akan disimpan ke repositori pribadi. Selain itu, saya akan memandu Anda melalui cara meng-host-nya di Netlify , dan menyimpan gambar Anda di Git LFS (Penyimpanan File Besar). Terakhir, kita akan melihat bagaimana kita dapat mengatur sistem manajemen konten untuk menambahkan posting dan gambar (mirip dengan backend WordPress) dengan Netlify CMS.

Perhatikan bahwa semua ini benar-benar gratis, yang sangat menakjubkan jika Anda bertanya kepada saya (walaupun Anda harus membayar ekstra jika Anda menggunakan semua penyimpanan LFS Anda atau jika lalu lintas situs Anda padat). Juga, saya menulis ini dari sudut pandang pengguna Bitbucket, berjalan di Mac. Beberapa langkah mungkin sedikit berbeda tetapi Anda harus dapat mengikutinya, apa pun pengaturan yang Anda gunakan.

Anda harus merasa nyaman dengan HTML, CSS, JS, Git dan terminal perintah. Memiliki beberapa gagasan dengan bahasa templating seperti Liquid juga bisa berguna, tetapi kami akan meninjau templat Hugo untuk membantu Anda memulai. Saya akan, bagaimanapun, memberikan rincian sebanyak mungkin!

Saya tahu kedengarannya seperti banyak, dan sebelum saya mulai melihat ini, itu untuk saya juga. Saya akan mencoba membuat transisi ini semulus mungkin bagi Anda dengan merinci langkah-langkahnya. Tidak terlalu sulit untuk menemukan semua sumber daya, tetapi ada sedikit dugaan di pihak saya, beralih dari satu dokumentasi ke dokumentasi berikutnya.

1. Mengekspor Konten Dari WordPress
2. Mempersiapkan Desain Blog Anda
3. Menyiapkan Repositori Baru
4. Mengaktifkan Git LFS (Opsional)
5. Membuat Situs Di Netlify
6. Mempersiapkan Netlify Large Media (Opsional)
7. Menyiapkan Hugo di Komputer Anda
8. Membuat Tema Kustom Anda
9. Catatan Tentang Sintaks Hugo
10. Konten Dan Data
11. Menyebarkan Di Netlify
12. Menyiapkan Domain Khusus
13. Mengedit Konten Di Netlify CMS

Catatan : Jika Anda mengalami masalah dengan beberapa di antaranya, beri tahu saya di komentar dan saya akan mencoba membantu, tetapi harap dicatat ini ditujukan untuk diterapkan pada blog statis sederhana yang tidak memiliki selusin widget atau komentar (Anda dapat mengaturnya nanti), dan bukan situs perusahaan atau portofolio pribadi. Anda pasti bisa, tetapi demi kesederhanaan, saya akan tetap menggunakan blog statis yang sederhana.

Prasyarat #

Sebelum kita melakukan apa pun, mari buat folder proyek di mana segala sesuatu mulai dari alat kita hingga repositori lokal kita akan berada. Saya akan menyebutnya “WP2Hugo” (jangan ragu untuk menyebutnya apa pun yang Anda inginkan).

Tutorial ini akan menggunakan beberapa alat baris perintah seperti npm dan Git. Jika Anda belum memilikinya, instal di mesin Anda:

• Instal Git
• Instal Node.js dan npm (Node.js termasuk npm)
• Instal Homebrew (disarankan untuk pengguna macOS/Linux)

Dengan ini diinstal, mari kita mulai!

1. Mengekspor Konten Dari WordPress #

Pertama, kami perlu mengekspor konten Anda dari WordPress: posting, halaman, dan unggahan. Ada beberapa alat yang tersedia yang disebutkan Hugo tetapi secara pribadi, hanya satu yang berfungsi: blog2md . Yang ini bekerja dengan menjalankan file JavaScript dengan Node.js di terminal perintah Anda. Dibutuhkan file XML yang diekspor oleh WordPress, dan menampilkan file penurunan harga dengan struktur yang tepat, mengubah HTML Anda menjadi Penurunan harga dan menambahkan apa yang disebut Front Matter , yang merupakan cara untuk memformat metadata di awal setiap file.

Buka admin WordPress Anda, dan buka menu Tools, submenu Ekspor. Anda dapat mengekspor apa yang Anda inginkan dari sana. Saya akan merujuk ke file yang diekspor sebagai YOUR-WP-EXPORT.xml .
<figure class=”

break-out article__image

“>

Anda dapat memilih dengan tepat data apa yang ingin Anda ekspor dari blog WordPress Anda.

Di dalam folder WP2Hugo kami, saya sarankan membuat folder baru bernama blog2mddi mana Anda akan menempatkan file dari alat blog2md, serta ekspor XML Anda dari WordPress ( YOUR-WP-EXPORT.xml ). Juga, buat folder baru di sana bernama outdi mana posting penurunan harga Anda akan pergi. Kemudian, buka terminal perintah Anda, dan navigasikan dengan cdperintah ke folder “blog2md” yang baru Anda buat (atau ketik cddengan spasi dan seret folder ke terminal).

Anda sekarang dapat menjalankan perintah berikut untuk mendapatkan posting Anda:

npm install
node index.js w YOUR-WP-EXPORT.xml out

Lihat ke dalam /WP2Hugo/blog2md/outdirektori untuk memeriksa apakah semua posting Anda (dan halaman potensial) ada di sana. Jika demikian, Anda mungkin memperhatikan ada sesuatu tentang komentar dalam dokumentasi: Saya memiliki blog bebas komentar sehingga saya tidak memerlukannya untuk dijalankan tetapi Hugo memang menawarkan beberapa opsi untuk komentar . Jika Anda memiliki komentar di WordPress, Anda dapat mengekspornya untuk implementasi ulang nanti dengan layanan khusus seperti Disqus.

Jika Anda cukup familiar dengan JS, Anda dapat mengubah index.js file untuk mengubah bagaimana file posting Anda akan keluar dengan mengedit wordpressImportfungsi. Anda mungkin ingin mengambil gambar unggulan, menghapus tautan permanen, mengubah format tanggal, atau mengatur jenisnya (jika Anda memiliki posting dan halaman). Anda harus menyesuaikannya dengan kebutuhan Anda, tetapi ketahuilah bahwa loop ( posts.forEach(function(post){ ... })) berjalan melalui semua posting dari ekspor, sehingga Anda dapat memeriksa konten XML setiap posting di loop itu dan menyesuaikan Front Matter Anda.

Selain itu, jika Anda perlu memperbarui URL yang terdapat dalam posting Anda (dalam kasus saya, saya ingin membuat tautan gambar relatif, bukan absolut) atau pemformatan tanggal, ini saat yang tepat untuk melakukannya, tetapi jangan sampai lupa waktu. . Banyak editor teks menawarkan pengeditan massal sehingga Anda dapat memasang ekspresi reguler dan membuat perubahan yang Anda inginkan di seluruh file Anda. Juga, Anda dapat menjalankan blog2mdskrip sebanyak yang diperlukan, karena akan menimpa file yang sudah ada sebelumnya di folder output.

Setelah Anda mengekspor file penurunan harga, konten Anda sudah siap. Langkah selanjutnya adalah menyiapkan tema WordPress Anda untuk bekerja di Hugo.

2. Mempersiapkan Desain Blog Anda #

Blog saya memiliki tata letak yang khas dengan tajuk, bilah navigasi, konten dan bilah sisi, dan footer — cukup mudah diatur. Alih-alih menyalin potongan tema WordPress saya, saya membangun kembali semuanya dari awal untuk memastikan tidak ada gaya yang berlebihan atau markup yang tidak berguna. Ini adalah saat yang tepat untuk menerapkan teknik CSS baru ( pssst… Grid cukup mengagumkan! ) dan menyiapkan strategi penamaan yang lebih konsisten (seperti pedoman CSS Wizardry ). Anda dapat melakukan apa yang Anda inginkan, tetapi ingat kami mencoba untuk mengoptimalkan blog kami, jadi ada baiknya untuk meninjau apa yang Anda miliki dan memutuskan apakah itu masih layak dipertahankan.

Mulailah dengan memecah blog Anda menjadi beberapa bagian sehingga Anda dapat melihat dengan jelas apa yang terjadi. Ini akan membantu Anda menyusun markup dan gaya Anda. Omong-omong, Hugo memiliki kemampuan bawaan untuk mengompilasi Sass ke CSS, jadi jangan ragu untuk memecah gaya tersebut menjadi file yang lebih kecil sebanyak yang Anda mau!
<figure class=”

“>

Ketika saya mengatakan sederhana, maksud saya sangat sederhana.

Atau, Anda dapat sepenuhnya melewati langkah ini untuk saat ini, dan menata blog Anda saat Anda membuka situs Hugo Anda. Saya memiliki markup dasar dan lebih suka pendekatan berulang untuk gaya. Ini juga merupakan cara yang baik untuk melihat apa yang berhasil dan apa yang tidak.

3. Menyiapkan Repositori Baru #

Sekarang setelah selesai, kita perlu menyiapkan repositori. Saya akan menganggap Anda ingin membuat repositori baru untuk ini, yang akan menjadi peluang bagus untuk menggunakan Git LFS (Sistem File Besar). Alasan saya menyarankan untuk melakukan ini sekarang adalah karena menerapkan Git LFS ketika Anda sudah memiliki ratusan gambar tidak semulus ini. Saya sudah melakukannya, tetapi itu adalah sakit kepala yang mungkin ingin Anda hindari. Ini juga akan memberikan manfaat lain di jalan dengan Netlify.

Sementara saya akan melakukan semua ini melalui Bitbucket dan Git GUI milik mereka, Sourcetree, Anda benar-benar dapat melakukan ini dengan GitHub dan GitLab dan alat desktop mereka sendiri. Anda juga dapat melakukannya langsung di terminal perintah, tetapi saya suka mengotomatiskan dan menyederhanakan proses sebanyak mungkin, mengurangi risiko membuat kesalahan konyol.

Saat Anda telah membuat repositori baru di platform Git pilihan Anda, buat folder kosong di dalam folder proyek lokal Anda (WP2Hugo), mis. hugorepo, lalu buka terminal perintah atau alat Git GUI Anda dan inisialisasi repositori Git lokal Anda; kemudian, tautkan ke repositori jarak jauh (Anda biasanya dapat menemukan perintah yang tepat untuk digunakan pada repositori jarak jauh yang baru dibuat).

Saya akan merekomendasikan membuat dev(atau stage) cabang sehingga cabang utama Anda benar-benar digunakan untuk penerapan produksi. Ini juga akan membatasi build baru yang akan dihasilkan hanya ketika Anda selesai dengan serangkaian perubahan potensial. Membuat cabang dapat dilakukan secara lokal atau di halaman web jarak jauh repositori Anda.

<figure class=”

break-out article__image

“>

GitHub memudahkan pembuatan cabang dengan mengklik pengalih cabang dan mengetik nama baru. Di GitLab, Anda perlu membuka dropdown “Plus” untuk mengakses opsi. Bitbucket mengharuskan Anda untuk membuka menu “Plus” di sebelah kiri untuk membuka menu slide-out dan klik “Buat cabang” di bagian “Mulai bekerja”.

4. Mengaktifkan Git LFS (Opsional) #

Git Large File System adalah fitur Git yang memungkinkan Anda menyimpan file besar dengan cara yang lebih efisien, seperti dokumen Photoshop, arsip ZIP, dan, dalam kasus kami, gambar. Karena gambar dapat memerlukan versi tetapi bukan kode, masuk akal untuk menyimpannya secara berbeda dari file teks biasa. Cara kerjanya adalah dengan menyimpan gambar di server jarak jauh, dan file di repositori Anda akan menjadi file teks yang berisi penunjuk ke sumber daya jarak jauh itu.

Sayangnya, ini bukan opsi yang cukup Anda klik untuk mengaktifkannya. Anda harus mengatur repositori Anda untuk mengaktifkan LFS dan ini memerlukan beberapa pekerjaan lokal. Dengan Git terinstal, Anda perlu menginstal ekstensi Git-LFS :

git lfs install

Jika, seperti saya, perintah itu tidak berhasil untuk Anda, coba alternatif Homebrew (untuk macOS atau Linux):

brew install git-lfs

Setelah selesai, Anda harus menentukan file mana yang akan dilacak di repositori Anda. Saya akan meng-host semua gambar yang saya unggah di WordPress /uploadfolder dalam folder dengan nama yang sama di pengaturan Hugo saya, kecuali folder ini akan berada di dalam /staticfolder (yang akan diselesaikan ke root setelah dikompilasi). Tentukan struktur folder Anda, dan lacak file Anda di dalamnya:

git lfs track "static/uploads/*"

Ini akan melacak file apa pun di dalam /static/uploadsmap. Anda juga dapat menggunakan yang berikut ini:

git lfs track "*.jpg"

Ini akan melacak setiap dan semua file JPG di repositori Anda. Anda dapat mencampur dan mencocokkan untuk hanya melacak JPG di folder tertentu, misalnya.

Dengan itu, Anda dapat mengkomit file konfigurasi LFS Anda ke repositori Anda dan mendorongnya ke repositori jarak jauh Anda. Saat berikutnya Anda melakukan commit secara lokal pada file yang cocok dengan konfigurasi pelacakan LFS, file tersebut akan “dikonversi” menjadi sumber daya LFS. Jika bekerja di cabang pengembangan, gabungkan komit ini ke cabang utama Anda.

Sekarang mari kita lihat Netlify.

5. Membuat Situs Di Netlify #

Pada titik ini, repositori Anda sudah diatur, sehingga Anda dapat melanjutkan dan membuat akun di Netlify . Anda bahkan dapat masuk dengan akun GitHub, GitLab, atau Bitbucket jika Anda mau. Setelah berada di dasbor, klik tombol “Situs baru dari Git” di sudut kanan atas, dan buat situs Netlify baru Anda.

Note: You can leave all the options at their default values for now.
<figure class=”

“>

Pilih penyedia Git Anda: ini akan membuka jendela pop-up untuk mengautentikasi Anda. Setelah selesai, jendela akan tertutup dan Anda akan melihat daftar repositori pada penyedia Git yang dapat Anda akses. Pilih repo Anda yang baru dibuat dan lanjutkan. Anda akan ditanya beberapa hal, yang sebagian besar dapat Anda tinggalkan secara default karena semua opsi dapat diedit nanti.

Untuk saat ini, di Pengaturan Situs, klik “Ubah nama situs” dan beri nama situs Anda apa pun yang Anda inginkan — saya akan menggunakan chris-smashing-hugo-blog. Kami sekarang akan dapat mengakses situs melalui chris-smashing-hugo-blog.netlify.com: halaman 404 yang indah!

6. Mempersiapkan Netlify Large Media (Opsional) #

Jika Anda menyiapkan Git LFS dan berencana menggunakan Netlify, Anda harus mengikuti langkah-langkah ini. Ini sedikit lebih berbelit-belit tetapi pasti sepadan: ini akan memungkinkan Anda untuk mengatur string kueri pada URL gambar yang akan diubah secara otomatis.

Katakanlah Anda memiliki tautan ke portrait.jpg yang merupakan gambar berukuran 900×1600 piksel. Dengan Netlify Large Media, Anda dapat memanggil file portrait.jpg?nf_resize=fit&w=420 , yang akan menskalakannya secara proporsional. Jika Anda mendefinisikan keduanya wdan h, dan atur nf_resize=smartcrop, itu akan mengubah ukurannya dengan memotong untuk fokus pada titik menarik gambar (seperti yang ditentukan oleh algoritme mewah, alias sihir otak robot! ). Saya menemukan ini sebagai cara yang bagus untuk memiliki thumbnail seperti yang dihasilkan WordPress, tanpa memerlukan beberapa file untuk gambar di repositori saya.

If this sounds appealing to you, let’s set it up!

Langkah pertama adalah menginstal antarmuka baris perintah (CLI) Netlify melalui npm:

npm install netlify-cli -g

Jika berhasil, jalankan perintah netlifyharus menghasilkan info tentang alat tersebut.

Anda kemudian harus memastikan Anda berada di folder repositori lokal Anda (yang saya beri nama “hugorepo” sebelumnya), dan jalankan:

netlify login

Otorisasi token. Selanjutnya, kita harus menginstal plugin Netlify Large Media. Lari:

netlify plugins:install netlify-lm-plugin
netlify lm:install

Seharusnya ada baris perintah yang ditampilkan di akhir pesan yang dihasilkan yang harus Anda salin (yang akan terlihat seperti /Users/YOURNAME/.netlify/helper/path.bash.incdi Mac) — jalankan. Perhatikan bahwa Keychain mungkin meminta kata sandi administrator mesin Anda di macOS.

Langkah selanjutnya adalah menautkan Netlify:

netlify link

Anda dapat memberikan nama situs Anda di sini (saya menyediakan chris-smashing-hugo-blognama yang saya berikan sebelumnya). Dengan ini, Anda hanya perlu mengatur fitur Media Besar dengan menjalankan yang berikut:

netlify lm:setup

Komit perubahan baru ini ke repositori lokal Anda, dan dorong ke cabang pengembangan jarak jauh. Saya memiliki beberapa kesalahan dengan Sourcetree dan Keychain di sepanjang baris git "credential-netlify" is not a git command. Jika itu kasus Anda, coba tekan secara manual dengan perintah ini:

git add -A
git commit -m "Set up Netlify Large media"
git push

If that didn’t work, you might need to install Netlify credential Helper. Here’s how to do it with Homebrew:

brew tap netlify/git-credential-netlify
brew install git-credential-netlify

Coba dorong komit Anda sekarang (baik dengan GUI atau terminal perintah Anda): itu akan berhasil!

Catatan : Jika Anda mengubah kata sandi Netlify Anda, jalankan netlify logout dan netlify login lagi.

Anda mungkin bertanya: “Semua ini, dan kami bahkan belum menginisialisasi build Hugo kami?” Ya, saya tahu, butuh beberapa saat tetapi semua persiapan untuk transisi sudah selesai. Kami sekarang dapat mengatur blog Hugo kami!

7. Mengatur Hugo Di Komputer Anda #

Anda harus terlebih dahulu menginstal Hugo di komputer Anda dengan salah satu opsi yang disediakan. Saya akan menggunakan Homebrew tetapi pengguna Windows dapat menggunakan Scoop atau Chocolatey, atau mengunduh paket secara langsung.

brew install hugo

Anda kemudian harus membuat situs Hugo baru tetapi tidak suka mengaturnya di folder yang tidak kosong. Opsi pertama: Anda dapat membuatnya di folder baru dan memindahkan isinya ke folder repositori lokal:

hugo new site your_temporary_folder

Opsi kedua: Anda dapat memaksanya untuk menginstal di repositori lokal Anda dengan sebuah bendera, pastikan Anda menjalankannya di folder yang tepat:

hugo new site . --force

Anda sekarang memiliki situs Hugo, yang dapat Anda putar dengan perintah ini:

hugo server

Anda akan mendapatkan pratinjau lokal di localhost. Sayangnya, Anda tidak memiliki konten dan tema sendiri. Jangan khawatir, kami akan segera menyiapkannya!

Pertama-tama mari kita lihat file konfigurasi ( config.toml dalam kasus saya): mari kita atur nama blog dan URL dasar (ini harus cocok dengan URL di dasbor Netlify Anda):

title = "Chris’ Smashing Hugo Blog"
baseURL = "https://chris-smashing-hugo-blog.netlify.com"

Tautan ini akan ditimpa saat Anda mengembangkan secara lokal, jadi Anda tidak akan mengalami kesalahan 404.

Mari berikan Hugo artikel yang diekspor dalam format penurunan harga. Mereka seharusnya duduk di /WP2Hugo/blog2md/outfolder dari langkah pertama. Di folder Hugo (alias direktori repositori lokal), akses contentfolder dan buat subfolder bernama posts. Tempatkan file penurunan harga Anda di sana, lalu mari kita siapkan tema.

8. Membuat Tema Kustom Anda #

Untuk langkah ini, saya sarankan mengunduh Saito boilerplate , yang merupakan tema dengan semua bagian yang Anda perlukan untuk memulai (dan tanpa gaya) — titik awal yang sangat berguna. Anda tentu saja dapat melihat koleksi tema siap pakai untuk Hugo ini jika Anda ingin melewati bagian proses ini. Semua terserah padamu!

Dari folder repositori lokal, klon tema ke themes/saito:

git submodule add https://github.com/hakuoku/saito-boilerplate.git themes/saito  

Anda dapat mengganti nama folder ini menjadi apa pun yang Anda inginkan, seperti cool-theme. Anda harus memberi tahu konfigurasi Hugo tema mana yang ingin Anda gunakan dengan mengedit config.toml/yaml/json Anda file . Edit nilai tema menjadi saito, atau cool-theme, atau apa pun nama folder tema Anda. Pratinjau Anda sekarang harus menunjukkan judul blog Anda bersama dengan baris hak cipta. Ini awal, kan?

Buka file tema layout/partials/home.html dan edit untuk menampilkan konten Anda, batasi pada lima item pertama yang bertipe posts(di dalam content/posts/folder), dengan range, firstdan where:

<div class="container">
{{ range first 5 (where .Paginator.Pages "Type" "posts") }}
    <article class="post post--{{ .Params.class }}">
        <h2 class="post__title">{{ .Title }}</h2>
        <section class="post__content">
            {{ .Content }}
        </section>
    </article>
{{ end }}
</div>

Konten Anda sekarang terlihat, dengan cara yang paling mendasar. Saatnya menjadikannya milik Anda — mari selami!

Membuat Template Dengan Hugo #

Anda dapat terlebih dahulu membaca pengantar template Hugo jika Anda suka, tetapi saya akan mencoba membahas beberapa hal penting yang akan membantu Anda memahami dasar-dasarnya.

Semua operasi di Hugo didefinisikan di dalam pembatas: kurung kurawal ganda (mis {{ .Title }}), yang seharusnya terasa familier jika Anda telah melakukan sedikit templating sebelumnya. Jika belum, anggap itu sebagai cara untuk menjalankan operasi atau menyuntikkan nilai pada titik tertentu di markup Anda. Untuk balok, diakhiri dengan {{ end }}tag, untuk semua operasi selain shortcode.

Tema memiliki layoutfolder yang berisi potongan-potongan tata letak. NS _defaultfolder akan menjadi titik awal Hugo, baseof.html menjadi ( Anda dapat menebaknya! ) dasar tata letak Anda. Ini akan memanggil setiap komponen, yang disebut “partials” (lebih lanjut tentang ini di dokumentasi Hugo tentang Partial Template ), mirip dengan bagaimana Anda akan menggunakan includedi PHP, yang mungkin sudah Anda lihat di tema WordPress Anda. Parsial dapat memanggil sebagian lainnya — hanya saja, jangan membuatnya menjadi infinite loop.

Anda dapat memanggil sebagian dengan {{ partial "file.html" . }}sintaksis. NS partialbagian ini cukup mudah, tetapi dua yang lain mungkin perlu dijelaskan. Anda mungkin berharap harus menulis partials/file.html tetapi karena semua partial harus berada di folder partials”, Hugo dapat menemukan folder itu dengan baik. Tentu saja, Anda dapat membuat subfolder di dalam folder “partials” jika Anda membutuhkan lebih banyak pengaturan.

You may have noticed a stray dot: this is the context you’re passing to your partial. If you had a menu partial, and a list of links and labels, you could pass that list into the partial so that it could only access to that list, and nothing else. I’ll talk more about this elusive dot in the next section.

Your baseof.html file is a shell that calls all the various partials needed to render your blog layout. It should have minimal HTML and lots of partials:

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
    <head>
        <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
        {{ partial "head.html" . }}
    </head>
    <body>
        {{ partial "header.html" . }}
        {{ partial "nav.html" . }}

        <main>
            {{ block "main" . }}{{ end }}
        </main>

        <aside>
            {{ partial "sidebar.html" . }}
        </aside>

        {{ partial "footer.html" . }}
    </body>
</html>

NS {{ block "main" . }}{{ end }}baris berbeda karena merupakan blok yang didefinisikan dengan template berdasarkan konten halaman saat ini (halaman beranda, halaman posting tunggal, dll.) dengan {{ define "main" }}.

Stylesheet #

Di tema Anda, buat folder bernama assetsdi mana kita akan menempatkan a cssmap. Ini akan berisi file SCSS kami, atau file CSS terpercaya. Sekarang, seharusnya ada css.html file di partialsfolder (yang dipanggil oleh head.html ). Untuk mengonversi Sass/SCSS ke CSS, dan mengecilkan stylesheet, kita akan menggunakan rangkaian fungsi ini (menggunakan sintaks Hugo Pipes alih-alih membungkus fungsi satu sama lain):

{{ $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}

Sebagai bonus — karena saya kesulitan menemukan jawaban langsung — jika Anda ingin menggunakan Autoprefixer, Hugo juga mengimplementasikan PostCSS. Anda dapat menambahkan fungsi pipa tambahan antara toCSSdan minifypada baris pertama, seperti:

{{ $style := resources.Get "css/style.scss" | toCSS | postCSS | minify | fingerprint }}

Buat file “postcss.config.js” di root blog Hugo Anda, dan berikan opsi, seperti:

module.exports = {
    plugins: {
        autoprefixer: {
            browsers: [
                "> 1%",
                "last 2 versions"
            ]
        }
    },
}

Dan presto! Dari Sass ke CSS yang diawali dan diperkecil. Fungsi pipa “sidik jari” adalah memastikan nama file unik, seperti style.c66e6096bdc14c2d3a737cff95b85ad89c99b9d1.min.css . Jika Anda mengubah stylesheet, sidik jari berubah, sehingga nama filenya berbeda, dan dengan demikian, Anda mendapatkan solusi penghilang cache yang efektif .

9. Catatan Pada Sintaks Hugo #

Saya ingin memastikan Anda memahami “Titik”, yang merupakan cara Hugo melingkupi variabel (atau dengan kata-kata saya sendiri, memberikan referensi kontekstual) yang akan Anda gunakan dalam template Anda.

Titik Dan Lingkup #

Dot seperti variabel tingkat atas yang dapat Anda gunakan dalam template atau kode pendek apa pun, tetapi nilainya tercakup dalam konteksnya. Nilai Dot dalam template tingkat atas seperti baseof.html berbeda dari nilai di dalam blok loop atau withblok.

Katakanlah ini ada di template kita di kita head.html sebagian :

{{ with .Site.Title }}{{ . }}{{ end }}

Meskipun kami menjalankan ini dalam lingkup utama, nilai Dot berubah berdasarkan konteks, yaitu .Site.Titlepada kasus ini. Jadi, untuk mencetak nilainya, Anda hanya perlu menulis .alih-alih mengetik ulang nama variabel lagi. Ini membingungkan saya pada awalnya tetapi Anda terbiasa dengan sangat cepat, dan ini membantu mengurangi redundansi karena Anda hanya memberi nama variabel satu kali. Jika sesuatu tidak berfungsi, biasanya karena Anda mencoba memanggil variabel tingkat atas di dalam blok cakupan.

Jadi bagaimana Anda menggunakan cakupan tingkat atas di dalam blok cakupan? Nah, katakanlah Anda ingin memeriksa satu nilai tetapi menggunakan yang lain. Anda dapat gunakan $yang akan selalu menjadi cakupan tingkat atas:

{{ with .Site.Params.InfoEnglish }}{{ $.Site.Params.DescriptionEnglish }}{{ end }}

Di dalam kondisi kami, ruang lingkupnya adalah .Site.Params.InfoEnglishtapi kita masih bisa mengakses nilai di luarnya dengan $, di mana secara intuitif menggunakan .Site.Params.DescriptionEnglishtidak akan berhasil karena akan mencoba menyelesaikan untuk .Site.Params.InfoEnglish.Site.Params.DescriptionEnglish, melempar kesalahan.

Variabel Khusus #

Anda dapat menetapkan variabel dengan menggunakan sintaks berikut:

{{ $customvar := "custom value" }}

The variable name must start with $ and the assignment operator must be := if it’s the first time it’s being assigned, = otherwise like so:

{{ $customvar = "updated value" }}

The problem you might run into is that this won’t transpire out of the scope, which brings me to my next point.

Scratch #

The Scratch functionality allows you to assign values that are available in all contexts. Say you have a list of movies in a movies.json file:

[
    {
        "name": "The Room",
        "rating": 4
    },
    {
        "name": "Back to the Future",
        "rating": 10
    },
    {
        "name": "The Artist",
        "rating": 7
    }
]

Sekarang, Anda ingin mengulangi konten file dan menyimpan yang favorit untuk digunakan nanti. Di sinilah Scratch berperan:

{{ .Scratch.Set "favouriteMovie" "None" }}{{ /* Optional, just to get you to see the difference syntax based on the scope */ }}

{{ range .Site.Data.movies }}
        {{ if ge .rating 10 }}
            {{ /* We must use .Scratch prefixed with a $, because the scope is .Site.Data.movies, at the current index of the loop */ }}
            {{ $.Scratch.Set "favouriteMovie" .name }}
        {{ end }}
{{ end }}
[...]
My favourite movie is {{ .Scratch.Get "favouriteMovie" }}
<!-- Expected output => My favourite movie is Back to the Future -->

Dengan Scratch, kita dapat mengekstrak nilai dari dalam loop dan menggunakannya di mana saja. Saat tema Anda menjadi semakin kompleks, Anda mungkin akan menemukan diri Anda meraih Scratch.

Catatan : Ini hanyalah sebuah contoh karena loop ini dapat dioptimalkan untuk menampilkan hasil ini tanpa Scratch, tetapi ini akan memberi Anda pemahaman yang lebih baik tentang cara kerjanya.

Persyaratan #

Sintaks untuk conditional sedikit berbeda dari yang Anda harapkan — dari perspektif JavaScript atau PHP. Pada dasarnya, ada fungsi yang mengambil dua argumen (tanda kurung opsional jika Anda memanggil nilainya secara langsung):

{{ if eq .Site.LanguageCode "en-us" }}Welcome!{{ end }}

Ada beberapa fungsi ini:

• eqmemeriksa kesetaraan
• nememeriksa ketidaksetaraan
• gtperiksa lebih besar dari
• geperiksa lebih dari atau sama dengan
• ltcek kurang dari
• lememeriksa kurang dari atau sama dengan

Catatan : Anda dapat mempelajari semua tentang fungsi yang ditawarkan Hugo di Referensi Cepat Fungsi Hugo .

Spasi #

Jika Anda pemilih tentang output seperti saya, Anda mungkin melihat beberapa baris kosong yang tidak diinginkan. Ini karena Hugo akan mengurai markup Anda apa adanya, meninggalkan baris kosong di sekitar persyaratan yang tidak terpenuhi, misalnya.

Katakanlah kita memiliki parsial hipotetis ini:

{{ if eq .Site.LanguageCode "en-us" }}
<p>Welcome to my blog!</p>
{{ end }}
<img src="/uploads/portrait.jpg" alt="Blog Author">

Jika kode bahasa situs tidak en-us, ini akan menjadi output HTML (perhatikan tiga baris kosong sebelum tag gambar):

<img src="/uploads/portrait.jpg" alt="Blog Author">

Hugo menyediakan sintaks untuk mengatasinya dengan tanda hubung di samping kurung kurawal di bagian dalam pembatas. {{-akan memangkas spasi putih sebelum kawat gigi, dan -}}akan memangkas spasi putih setelah kawat gigi. Anda dapat menggunakan salah satu atau keduanya secara bersamaan, tetapi pastikan ada spasi antara tanda hubung dan operasi di dalam pembatas.

Dengan demikian, jika template Anda berisi yang berikut:

{{- if eq .Site.LanguageCode "en-us" -}}
<p>Welcome to my blog!</p>
{{- end -}}
<img src="/uploads/portrait.jpg" alt="Blog Author">

…maka markup akan menghasilkan ini (tanpa baris kosong):

<img src="/uploads/portrait.jpg" alt="Blog Author">

Ini dapat membantu untuk situasi lain seperti elemen dengan display: inline-blockyang seharusnya tidak memiliki spasi putih di antara mereka. Sebaliknya, jika Anda ingin memastikan setiap elemen berada pada barisnya sendiri di markup (misalnya di a {{ range }}loop), Anda harus menempatkan tanda hubung dengan hati-hati untuk menghindari pemangkasan spasi putih “rakus”.

Contoh di atas akan menampilkan yang berikut jika kode bahasa situs cocok dengan “ en-us” (tidak ada lagi jeda baris antara pdan imgtag):

<p>Welcome to my blog!</p><img src="/uploads/portrait.jpg" alt="Blog Author">

10. Isi Dan Data #

Konten Anda disimpan sebagai file penurunan harga, tetapi Anda juga dapat menggunakan HTML. Hugo akan merendernya dengan benar saat membangun situs Anda.

Beranda Anda akan memanggil _default/list.htmltata letak, yang mungkin terlihat seperti ini:

{{ define "main" }}
    {{ partial "list.html" . }}
{{ end }}

The main block calls the list.html partial with the context of ., a.k.a. the top level. The list.html partial may look like this:

{{ define "main" }}
<ol class="articles">
    {{ range .Paginator.Pages }}
        <li>
            <article>
                <a href="{{ .URL }}">
                    <h2>{{ .Title }}</h2>
                    <img src="{{ .Params.featuredimage }}" alt="">
                    <time datetime="{{ .Date.Format "2006-01-02" }}">
                        {{ .Date.Format "January 2 2006" }}
                    </time>
                </a>
            </article>
        </li>
    {{ end }}
</ol>
{{ partial "pagination.html" . }}
{{ end }}

Sekarang kami memiliki daftar dasar artikel kami, yang dapat Anda gaya sesuai keinginan! Jumlah artikel per halaman ditentukan dalam file konfigurasi, dengan paginate = 5(dalam TOML).

Anda mungkin benar-benar bingung seperti saya dengan format tanggal di Hugo . Setiap kali unit dipetakan ke angka (bulan pertama, hari kedua, jam ketiga, dll.) menjadi lebih masuk akal bagi saya setelah saya melihat penjelasan visual di bawah yang disediakan oleh dokumentasi bahasa Go — yang agak aneh, tapi agak pintar juga!

 Jan 2 15:04:05 2006 MST
=> 1 2  3  4  5    6  -7

Now all that’s left to do is to display your post on a single page. You can edit the post.html partial to customize your article’s layout:

<article>
    <header>
        <h1>{{ .Title }}</h1>
        <p>
            Posted on <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006. 1. 2" }}</time>
        </p>
    </header>
    <section>
        {{ .Content }}
    </section>
</article>

Dan begitulah cara Anda menampilkan konten Anda!

Jika Anda ingin menyesuaikan URL, perbarui file konfigurasi Anda dengan menambahkan a [permalinks]option (TOML), yang dalam hal ini akan membuat URL terlihat seperti my-blog.com/post-slug/:

[permalinks]
    posts = ":filename/"

Jika Anda ingin membuat umpan RSS dari konten Anda (karena RSS luar biasa), tambahkan berikut ini di file konfigurasi situs Anda (templat default Saito akan menampilkan tag yang sesuai di head.html jika opsi ini terdeteksi):

rssLimit = 10
[outputFormats]
    [outputFormats.RSS]
        mediatype = "application/rss"
        baseName = "feed"

Tetapi bagaimana jika Anda memiliki semacam konten di luar pos? Di situlah templat data masuk: Anda dapat membuat file JSON dan mengekstrak datanya untuk membuat menu atau elemen di bilah sisi Anda. YAML dan TOML juga merupakan opsi tetapi kurang dapat dibaca dengan data yang kompleks (misalnya objek bersarang). Anda dapat, tentu saja, mengatur ini di file konfigurasi situs Anda, tetapi — bagi saya — agak kurang mudah dinavigasi dan kurang memaafkan.

Let’s create a list of “cool sites” that you may want to show in your sidebar — with a link and a label for each site as an array in JSON:

{
    "coolsites": [
        { "link": "https://smashingmagazine.com", "label": "Smashing Magazine" },
        { "link": "https://gohugo.io/", "label": "Hugo" },
        { "link": "https://netlify.com", "label": "Netlify" }
    ]
}

Anda dapat menyimpan file ini di root repositori Anda, atau root tema Anda, di dalam a datafolder, seperti /data/coolsites.json. Kemudian, di sidebar.htmlparsial, Anda dapat mengulanginya dengan rangemenggunakan .Site.Data.coolsites:

<h3>Cool Sites:</h3>
<ul>
{{ range .Site.Data.coolsites.coolsites }}
    <li><a href="{{ .link }}">{{ .label }}</a></li>
{{ end }}
</ul>

Ini sangat berguna untuk semua jenis data khusus yang ingin Anda ulangi. Saya menggunakannya untuk membuat daftar Google Font untuk tema saya, di mana kategori posting dapat dimasukkan, penulis (dengan bio, avatar, dan tautan beranda), menu mana yang akan ditampilkan dan dalam urutan apa. Anda benar-benar dapat melakukan banyak hal dengan ini, dan ini cukup mudah.

Pemikiran terakhir tentang data dan semacamnya: apa pun yang Anda masukkan ke dalam Hugo /staticfolder akan tersedia di root ( /) pada pembuatan langsung. Hal yang sama berlaku untuk folder tema.

11. Menyebarkan Di Netlify #

Jadi Anda sudah selesai, atau mungkin Anda hanya ingin melihat keajaiban apa yang Netlify operasikan? Kedengarannya bagus untuk saya, selama server Hugo lokal Anda tidak mengembalikan kesalahan.

Komit perubahan Anda dan dorong ke cabang pengembangan jarak jauh Anda ( dev). Buka Netlify berikutnya, dan akses pengaturan situs Anda. Anda akan melihat opsi untuk “Build & deploy”. Kita perlu mengubah beberapa hal di sini.

1. Pertama, di bagian “Build settings”, pastikan “Build command” diatur ke hugodan “Terbitkan direktori” diatur ke public(default yang direkomendasikan untuk Anda simpan di file konfigurasi Hugo Anda);
2. Selanjutnya, di bagian “Menyebarkan konteks”, atur “Cabang produksi” ke cabang utama Anda di repositori Anda. Saya juga menyarankan “Penyebaran cabang” Anda untuk disetel ke “Terapkan hanya cabang produksi”;
3. Terakhir, di bagian “Variabel lingkungan”, edit variabel dan klik “Variabel baru”. Kami akan mengatur lingkungan Hugo ke 0,53 dengan pasangan berikut: atur kunci ke HUGO_VERSIONdan nilai untuk 0.53.

Sekarang pergilah ke repositori jarak jauh Anda dan gabungkan cabang pengembangan Anda ke cabang utama Anda: ini akan menjadi pengait yang akan menyebarkan blog Anda yang diperbarui (ini dapat disesuaikan tetapi defaultnya masuk akal bagi saya).

Kembali ke dasbor Netlify Anda, “Produksi menyebarkan” situs Anda akan memiliki beberapa aktivitas baru. Jika semuanya berjalan dengan baik, ini akan memproses dan menyelesaikan ke label “Diterbitkan”. Mengklik item penerapan akan membuka ikhtisar dengan log operasi. Di bagian atas, Anda akan melihat “Pratinjau penerapan”. Ayo, klik – Anda layak mendapatkannya. Ini hidup!

12. Menyiapkan Domain Kustom #

Memiliki URL sebagai my-super-site.netlify.comtidak sesuai selera Anda, dan Anda sudah memilikinya my-super-site.com? Saya mengerti. Mari kita ubah itu!

Buka pendaftar domain Anda dan buka pengaturan DNS domain Anda. Di sini, Anda harus membuat entri baru: Anda dapat menetapkan catatan ALIAS/CNAME yang menunjuk ke my-super-site.netlify.com, atau tetapkan rekor A yang mengarahkan domain Anda ke penyeimbang beban Netlify, yaitu 104.198.14.52pada saat penulisan.

Anda dapat menemukan informasi terbaru tentang dokumentasi Netlify tentang domain khusus . IP penyeimbang beban akan berada di bagian pengaturan DNS , di bawah ” Konfigurasi DNS manual untuk root dan domain kustom www “.

Setelah selesai, buka dasbor situs Anda di Netlify dan klik “Pengaturan domain”, di mana Anda akan melihat “Tambahkan domain khusus”. Masukkan nama domain Anda untuk memverifikasinya.

Anda juga dapat mengelola domain melalui dasbor di tab Domain. Antarmuka terasa kurang membingungkan di halaman ini, tetapi mungkin ini akan membantu lebih memahami pengaturan DNS Anda seperti yang terjadi pada saya.

Catatan : Netlify juga dapat menangani semuanya untuk Anda jika Anda ingin membeli domain melalui mereka. Lebih mudah tapi ada biaya tambahan.

Setelah Anda menyiapkan domain khusus, di “Pengaturan domain”, gulir ke bawah ke bagian “HTTPS” dan aktifkan sertifikat SSL/TLS. Ini mungkin memakan waktu beberapa menit tetapi itu akan memberi Anda sertifikat gratis: domain Anda sekarang berjalan di HTTPS.

13. Mengedit Konten Di CMS Netlify #

Jika Anda ingin mengedit artikel Anda, mengunggah gambar dan mengubah pengaturan blog Anda seperti yang Anda lakukan di antarmuka back-end WordPress, Anda dapat menggunakan Netlify CMS yang memiliki cukup bagus tutorial yang . Ini adalah satu file yang akan menangani semuanya untuk Anda (dan ini adalah generator-agnostik: ini akan bekerja dengan Jekyll, Eleventy, dan seterusnya).

Anda hanya perlu mengunggah dua file dalam satu folder:

• CMS (satu file HTML);
• file konfigurasi (file YAML).

Yang terakhir akan menampung semua pengaturan situs khusus Anda.

Pergi ke root Hugo Anda /static folder and create a new folder which you will access via my-super-site.com/FOLDER_NAME (I will call mine admin). Inside this adminfolder, buat index.html file dengan menyalin markup yang disediakan oleh Netlify CMS:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

File lain yang perlu Anda buat adalah file konfigurasi: config.yml . Ini akan memungkinkan Anda untuk menentukan pengaturan situs Anda (nama, URL, dll.) sehingga Anda dapat mengatur apa isi depan posting Anda, serta bagaimana file data Anda (jika ada) harus dapat diedit. Ini sedikit lebih rumit untuk diatur, tetapi itu tidak berarti itu tidak mudah.

Jika Anda menggunakan GitHub atau GitLab, mulai Anda file config.yml dengan:

backend:
    name: git-gateway
    branch: dev # Branch to update (optional; defaults to master)

Jika Anda menggunakan Bitbucket, ini sedikit berbeda:

backend:
    name: bitbucket
    repo: your-username/your-hugorepo
    branch: dev # Branch to update (optional; defaults to master)

Kemudian, untuk unggahan kami, kami harus memberi tahu CMS tempat menyimpannya:

media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

Saat Anda membuat posting baru, CMS akan menghasilkan slug untuk nama file yang dapat Anda sesuaikan dengan tiga opsi:

slug:
    encoding: "ascii" # You can also use "unicode" for non-Latin
    clean_accents: true # Removes diacritics from characters like é or å
    sanitize_replacement: "-" # Replace unsafe characters with this string

Terakhir, Anda harus menentukan bagaimana data dalam postingan Anda terstruktur. Saya juga akan menentukan bagaimana file data coolsites terstruktur — untuk berjaga-jaga jika saya ingin menambahkan situs lain ke dalam daftar. Ini diatur dengan collectionsobjek yang pasti akan menjadi yang paling bertele-tele, bersama dengan beberapa opsi yang bagus, Anda dapat membaca lebih lanjut di sini .

collections:
    - name: "articles" # Used in routes, e.g., /admin/collections/blog
        label: "Articles" # Used in the Netlify CMS user interface
        folder: "content/posts" # The path to the folder where the posts are stored, usually content/posts for Hugo
        create: true # Allow users to create new documents in this collection
        slug: "{{slug}}" # Filename template, e.g., post-title.md
        fields: # The fields for each document, usually in front matter
            - {label: "Title", name: "title", widget: "string", required: true}
            - {label: "Draft", name: "draft", widget: "boolean", default: true }
            - {label: "Type", name: "type", widget: "hidden", default: "post" }
            - {label: "Publish Date", name: "date", widget: "date", format: "YYYY-MM-DD"}
            - {label: "Featured Image", name: "featuredimage", widget: "image"}
            - {label: "Author", name: "author", widget: "string"}
            - {label: "Body", name: "body", widget: "markdown"}
    - name: 'coolsites'
            label: 'Cool Sites'
            file: 'data/coolsites.json'
            description: 'Website to check out'
            fields:
                - name: coolsites
                    label: Sites
                    label_singular: 'Site'
                    widget: list
                    fields:
                        - { label: 'Site URL', name: 'link', widget: 'string', hint: 'https://…' }
                        - { label: 'Site Name', name: 'label', widget: 'string' }

Catatan : Anda dapat membaca lebih lanjut tentang cara mengonfigurasi masing-masing bidang di dokumentasi Netlify CMS Widgets yang membahas setiap jenis widget dan cara menggunakannya — terutama berguna untuk format tanggal.

Otentikasi #

Hal terakhir yang perlu kita lakukan adalah memastikan hanya pengguna yang berwenang yang dapat mengakses backend! Menggunakan otentikasi penyedia Git Anda adalah cara mudah untuk melakukannya.

Buka situs Netlify Anda dan klik tab “Pengaturan”. Lalu pergi ke “Access control” yang merupakan tautan terakhir di menu di sisi kiri. Di sini, Anda dapat mengonfigurasi OAuth untuk dijalankan melalui GitHub, GitLab, atau Bitbucket dengan memberikan kunci dan nilai rahasia yang ditentukan untuk akun pengguna Anda (bukan di repositori). Anda ingin menggunakan penyedia Git yang sama dengan penyedia tempat penyimpanan repo Anda.

GitHub #

Buka halaman “Pengaturan” Anda di GitHub (klik avatar Anda untuk membuka menu), dan akses “Pengaturan Pengembang”. Klik “Daftar aplikasi baru” dan berikan nilai yang diperlukan:

• nama, seperti “Netlify CMS untuk blog super saya”;
• URL beranda, tautan ke situs Netlify Anda;
• deskripsi, jika Anda menginginkannya;
• URL panggilan balik aplikasi, yang harus “ https://api.netlify.com/auth/done”.

Simpan, dan Anda akan melihat ID Klien dan Rahasia Klien Anda. Berikan mereka ke Kontrol Akses Netlify.

GitLab #

Klik avatar Anda untuk mengakses halaman Pengaturan, dan klik “Aplikasi” di menu “Pengaturan Pengguna” di sebelah kiri. Anda akan melihat formulir untuk menambahkan aplikasi baru. Berikan informasi berikut:

• nama, seperti “Netlify CMS untuk blog super saya”;
• redirect URI, yang harus “ https://api.netlify.com/auth/done”;
• lingkup yang harus diperiksa adalah:
  • api
  • read_user
  • read_repository
  • write_repository
  • read_registry

Menyimpan aplikasi Anda akan memberi Anda ID dan Rahasia Aplikasi Anda, yang sekarang dapat Anda masukkan di Access Control Netlify.

Bitbucket #

Buka pengaturan akun pengguna Anda (klik avatar Anda, lalu “Pengaturan Bitbucket”). Di bawah “Manajemen Akses”, klik “OAth”. Di bagian “Konsumen OAuth”, klik “Tambahkan konsumen”. Anda dapat membiarkan sebagian besar hal pada nilai defaultnya kecuali untuk ini:

• nama, seperti “Netlify CMS untuk blog super saya”;
• URL panggilan balik, yang harus “ https://api.netlify.com/auth/done”;
• izin yang harus diperiksa adalah:
  • Akun: Email, Baca, Tulis
  • Repositori: Baca, Tulis, Admin
  • Tarik Permintaan: Baca, Tulis
  • Webhook: Baca dan tulis

Setelah menyimpan, Anda dapat mengakses kunci dan rahasia Anda, yang kemudian dapat Anda berikan kembali di Access Control Netlify.

Setelah memberikan token, buka Netlify, dan temukan Pengaturan Situs. Buka “Identitas” dan aktifkan fitur tersebut. Anda sekarang dapat menambahkan Penyedia Eksternal: pilih penyedia Git Anda dan klik “Aktifkan”.

Jika Anda memerlukan detail tambahan, Netlify CMS memiliki panduan otentikasi yang dapat Anda baca.

Anda sekarang dapat mengakses backend situs Netlify Anda dan mengedit konten. Setiap edit adalah komit pada repo Anda, di cabang yang ditentukan dalam file konfigurasi Anda. Jika Anda menyimpan maincabang sebagai target untuk Netlify CMS, setiap kali Anda menyimpan, itu akan menjalankan build baru. Lebih nyaman, tetapi tidak sebersih “di antara keadaan”.

Memilikinya menghemat a devbranch memungkinkan Anda untuk memiliki kontrol yang lebih baik saat Anda ingin menjalankan build baru. Ini sangat penting jika blog Anda memiliki banyak konten dan membutuhkan waktu pembuatan yang lebih lama. Cara apa pun akan berhasil; itu hanya masalah bagaimana Anda ingin menjalankan blog Anda .

Juga, harap dicatat bahwa Git LFS adalah sesuatu yang Anda instal secara lokal, jadi gambar yang diunggah melalui Netlify CMS akan menjadi “normal”. Jika Anda menarik cabang jarak jauh Anda secara lokal, gambar harus dikonversi ke LFS, yang kemudian dapat Anda komit dan dorong ke cabang jarak jauh Anda. Selain itu, CMS Netlify saat ini tidak mendukung LFS sehingga gambar tidak akan ditampilkan di CMS, tetapi akan muncul di build akhir Anda.

Bacaan yang disarankan : Generator Situs Statis Ditinjau: Jekyll, Middleman, Roots, Hugo

Kesimpulan #

Perjalanan yang luar biasa! Dalam tutorial ini, Anda telah belajar bagaimana mengekspor posting WordPress Anda ke file Markdown, membuat repositori baru, mengatur Git LFS, menghosting situs di Netlify, membuat situs Hugo, membuat tema Anda sendiri dan mengedit konten dengan Netlify CMS . Lumayan!

Apa berikutnya? Nah, Anda dapat bereksperimen dengan pengaturan Hugo Anda dan membaca lebih lanjut tentang berbagai alat yang ditawarkan Hugo — ada banyak yang tidak saya bahas demi singkatnya.

Mengeksplorasi! Selamat bersenang-senang! Blog!