portfolio starter
1.0.0
Ini adalah portofolio ringan Starterkit yang dibangun dengan Eleventy. Ini ditujukan untuk desainer, ilustrator, arsitek, dan orang lain yang tertarik untuk berbagi pekerjaan dan aktivitas mereka.
Pengguna yang dituju mungkin tidak tahu cara membuat kode tetapi tertarik pada teknologi di balik situs web mereka, bersedia menulis di Markdown, dan dengan senang hati mengikuti dokumentasi ini.
Kunjungi portofolio-starter.sb-ph.com untuk memeriksanya. Konten dan kode dalam repositori ini mendorong situs demo.
"No-Code" sedikit keliru. File konten Anda secara teknis ditulis dalam kode, tetapi ini adalah sintaks yang sangat mudah dibaca yang disebut Markdown (lebih lanjut tentang ini nanti). Yang kami maksud dengan "no-code" adalah Anda tidak perlu menyentuh baris perintah, git, atau membuka editor kode di komputer Anda.
GitHub adalah platform yang menyimpan kode. Kode dan konten situs web Anda akan hidup di GitHub. Jika Anda sudah memiliki akun, silakan dan masuk. Jika tidak, daftar ke akun. Akun individu gratis sudah cukup.
Netlify dan Zeit hosting penyedia yang menawarkan tingkatan gratis yang murah hati untuk orang -orang dengan situs web statis seperti ini. Netlify mungkin sedikit lebih mudah untuk langkah -langkah berikut dan tampaknya digunakan oleh lebih dari sebelas pengguna, tetapi keduanya merupakan platform yang solid. Jika Anda sudah memiliki akun dengan salah satu platform ini, masuklah. Jika tidak, daftar untuk satu.
Dengan mengklik salah satu tombol di bawah ini, Anda akan mengkloning repositori ini (yaitu membuat versi duplikat yang hidup di akun GitHub Anda sendiri) dan kemudian menggunakan situs web baru ini ke hosting statis Anda.
Sebelum melanjutkan, tentukan nama untuk repositori Anda. Itu harus menjadi sesuatu yang mirip dengan nama situs Anda, tetapi hanya harus menyertakan huruf kecil, angka, dan tanda hubung. Misalnya, nama repositori ini adalah portfolio-starter .
Jika Anda memiliki akun Netlify , klik tombol ini dan ikuti instruksi sederhana Netlify untuk menghubungkan Netlify dan GitHub:
Jika Anda memiliki akun Zeit , klik tombol di bawah ini dan kemudian ikuti instruksi Zeit:
Instruksi Zeit akan memandu Anda melalui cara menginstal Zeit sekarang untuk GitHub sehingga dapat membuat repositori untuk Anda dan dapat menggunakan perubahan Anda. Berikan izin untuk semua repositori saat memasang Zeit sekarang. Zeit harus mendeteksi secara otomatis bahwa Anda menggunakan Eleventy dengan pengaturan sebagai berikut (Anda tidak perlu khawatir tentang perintah pengembangan):
Perintah Bangun: npx @11ty/eleventy Output Directory: _site
Setelah selesai mengikuti instruksi di atas untuk Netlify atau Zeit , Anda akan diarahkan ke dasbor situs web Anda. Ini menampilkan subdomain default Anda dan informasi penting lainnya tentang situs Anda. Anda juga akan menerima beberapa email yang memberi tahu Anda bahwa layanan tersebut terhubung.
Zeit memungkinkan Anda untuk memilih visibilitas repositori Anda saat Anda mengaturnya. Netlify, di sisi lain, secara otomatis membuat repositori publik. Lihat dokumentasi GitHub jika Anda ingin menyesuaikan visibilitas repositori Anda.
Untuk mengedit atau menambahkan konten tanpa baris perintah, Anda perlu menggunakan antarmuka GitHub untuk menavigasi file Anda di dalam folder /content di repositori Anda. Lihat referensi konten untuk mempelajari lebih lanjut tentang struktur folder /content dan masing -masing file di dalamnya, terutama file data global yang mencakup judul dan URL situs web Anda.
Untuk mengedit atau menghapus file yang ada, Anda harus membuka file yang relevan di GitHub dan kemudian klik tombol Edit (tombol dengan ikon pensil) atau tombol Hapus (tombol dengan tempat sampah) di sudut kanan atas di atas konten halaman.
Jika Anda ingin menambahkan halaman baru, Anda harus menavigasi ke folder posts , projects , atau pages tergantung pada apa yang ingin Anda tambahkan dan kemudian klik tombol "Buat File Baru" di dekat bagian atas halaman. Ini akan membuka halaman editor baru di mana Anda dapat menambahkan nama file dan file file Anda. Karena semua konten teks ditulis dalam penurunan harga, nama file harus diakhiri dengan md (yaitu my-post-name.md ).
Jika Anda ingin menambahkan media, Anda harus menavigasi ke folder media dan kemudian klik tombol "Unggah File" di dekat bagian atas halaman. Ini akan memberi Anda area untuk mengunggah satu atau lebih file. Lihat panduan media untuk tips tentang jenis file dan ukuran.
Untuk menyimpan pengeditan atau penambahan yang dibuat di GitHub, Anda harus melakukan perubahan menggunakan antarmuka GitHub di dasar halaman. Jika Anda menghubungkan Netlify atau Zeit pada langkah sebelumnya, komitmen juga akan memberitahu GitHub untuk secara otomatis menggunakan perubahan Anda. Untuk lebih lanjut tentang apa komitmen, lihat Glosarium GitHub. Saat Anda melakukan pengeditan atau penambahan secara langsung di GitHub, Anda dapat menggunakan pesan komit default yang sudah diisi sebelumnya dan harus berkomitmen langsung ke cabang master (pengaturan default).
Instruksi pengaturan baris perintah mengasumsikan bahwa Anda memiliki keakraban dengan baris perintah, bahwa Anda memiliki versi 8 atau lebih tinggi dari node.js yang diinstal di komputer Anda, dan bahwa Anda memiliki akun GitHub.
Repositori klon secara lokal ke folder proyek bernama dengan menjalankan git clone https://github.com/sb-ph/portfolio-starter.git my-website dan kemudian ubah ke folder proyek baru dengan menjalankan cd my-website . Jalankan npm install untuk menginstal dependensi termasuk Eleventy.
Jalankan rm -rf .git untuk menghapus riwayat git untuk awal yang baru, dan kemudian jalankan git init untuk menginisialisasi repo git baru. Komit semua file Anda untuk membuat cabang master baru, dan kemudian tambahkan proyek Anda ke GitHub menggunakan baris perintah.
Untuk membangun situs web di direktori gitgnored /_site , jalankan npx @11ty/eleventy . Untuk memutar server untuk pengembangan lokal atau pengeditan konten, jalankan npx @11ty/eleventy --serve . Ini akan membuat situs Anda tersedia di http: // localhost: 8080, dan situs akan secara otomatis memuat ulang saat Anda melakukan perubahan.
Jika Anda ingin menggunakan Netlify atau Zeit, ikuti dokumentasi mereka untuk membuat repositori Anda terhubung ke akun hosting Anda untuk penyebaran berkelanjutan. Jika Anda ingin menggunakan penyedia hosting lain, Anda dapat menemukan file statis Anda di direktori /_site setelah Anda menghasilkan build.
Untuk mengedit konten secara lokal, putar server dengan menjalankan npx @11ty/eleventy --serve dan kemudian menyesuaikan file markdown dan json dalam direktori /content . Jika situs Anda terhubung ke penempatan terus menerus, pastikan Anda melakukan perubahan pada cabang kanan (mungkin master ) jika tidak mereka tidak akan digunakan.
Netlify dan Zeit memberi Anda subdomain default secara otomatis saat Anda menggunakan situs web Anda, jadi ini adalah langkah opsional. Jika Anda ingin menggunakan domain Anda sendiri, Anda harus mengikuti instruksi mereka untuk mengatur ini. Baca lebih lanjut tentang domain khusus di Zeit, atau baca lebih lanjut tentang domain khusus di Netlify.
Kedua pemandu ini akan memandu Anda melalui cara mengatur sistem nama domain domain Anda (DNS). Perhatikan bahwa DNS bisa halus. DNS mencatat untuk domain Anda memberi tahu browser di mana menemukan situs web Anda dan memberi tahu server email cara mengarahkan email kepada Anda. Pastikan untuk menuliskan catatan DNS yang ada sebelum mengubah apa pun.
Jika Anda menemukan nama server sebagai bagian dari proses pengaturan domain khusus dan sudah menggunakan domain Anda untuk email, Anda harus menambahkan catatan MX Anda dan catatan lain yang terkait dengan email ke penyedia hosting baru Anda sebelum Anda menemukan nama server. Jika tidak, email Anda mungkin turun.
Jika Anda berada di versi starter portofolio yang lebih lama dan ingin memperbaruinya ke versi yang lebih baru, kami sarankan melakukan ini secara manual dengan mengganti semua folder dan file kecuali untuk folder /content . Anda harus mencadangkan situs web Anda sebelum melakukan pembaruan atau perubahan besar. Kunjungi beranda repositori Anda dan klik tombol "klon atau unduh" hijau untuk mengunduh file zip dari seluruh repositori, lalu simpan di tempat yang aman.
Semua konten hidup di folder /content . Secara default, starter portofolio diisi dengan konten yang digunakan di situs demo.
Konten mencakup data global, file markdown untuk setiap halaman, dan media. Penting untuk memformat dan mengatur masing -masing file ini dengan cara tertentu sehingga situs Anda menggunakan tanpa kesalahan dan terlihat seperti yang diharapkan.
Metadata tertentu seperti judul situs dan URL digunakan di seluruh situs web. Semua data global ini terkandung dalam file /content/_data/global.json .
Rincian dalam file ini harus ditetapkan ketika situs web pertama kali diatur dan kemudian kemungkinan tidak akan disentuh lagi kecuali situs web dipindahkan atau domain berubah. Ini adalah contoh file global.json :
{
"title" : " Tortor Parturient Ridiculus " ,
"lang" : " en " ,
"footer" : " (c) Jane Doe, 2020 " ,
"url" : " https://tpr.com " ,
"author" : {
"name" : " Jane Doe " ,
"email" : " [email protected] "
}
} Ini adalah satu -satunya konten yang harus ditulis dalam JSON, format teks yang digunakan untuk menyusun data. Sintaks JSON sangat ketat. All Keys (yaitu title ) dan semua string (yaitu My website ) terlampir dalam kutipan ganda, dan semua properti (yaitu "title": "My website" ) dipisahkan oleh koma kecuali untuk properti terakhir. Semua objek JSON terlampir dalam kurung keriting {} . Sintaks yang salah dalam file ini akan menghasilkan kesalahan, yang berarti perubahan Anda tidak akan digunakan.
Ini adalah properti secara lebih rinci.
| Kunci | Format | Bawaan | Keterangan |
|---|---|---|---|
author | Objek json | - | Objek JSON yang menyertakan nama dan alamat email dari penulis situs web |
footer | Penurunan harga | kredit singkat | Teks footer yang ditulis dalam penurunan harga |
lang * | teks | en | Tag Bahasa IANA yang menyatakan bahasa situs web Anda |
title * | teks | - | Judul situs web Anda |
url * | url | - | URL situs web Anda |
Footer termasuk kredit pendek secara default. Jangan ragu untuk menggantinya dengan teks apa pun yang paling cocok untuk Anda. Ini mungkin termasuk pemberitahuan hak cipta, colophon, detail kontak atau informasi penting lainnya. Footer tidak mendukung jeda garis.
Semua halaman konten utama termasuk posting, proyek, halaman, beranda, halaman kesalahan 404, blog, dan umpan RSS ditulis dalam penurunan harga. Markdown memungkinkan Anda untuk menulis menggunakan format teks biasa yang mudah dibaca, mudah ditulis yang dapat dikonversi menjadi HTML yang valid. Kunjungi situs web Markdown-IT untuk daftar lengkap opsi pemformatan termasuk daftar, tautan, judul, dan banyak lagi. Anda juga dapat melihat sumber untuk file readme ini; itu ditulis dalam penurunan harga juga!
Semua file Markdown berakhir di ekstensi .md , dan Starterkit ini menggunakan sisa nama file untuk menghasilkan slug halaman (bagian akhir dari URL halaman).
Folder atau file apa pun yang didahului oleh garis bawah _ tidak akan dipublikasikan. Karena itu, Anda dapat menggunakan garis bawah untuk membuat draft seperti /content/posts/_testing-a-draft.md . Namun , sangat penting untuk diingat bahwa draf Anda akan terlihat oleh orang lain di GitHub jika repositori Anda bersifat publik.
Setiap file markdown dimulai dengan frontmatter YAML. YAML adalah sintaks teks biasa yang memungkinkan teks yang dapat dibaca manusia diformat sebagai data terstruktur. Frontmatter adalah teks di bagian atas file yang dipagari oleh tiga tanda hubung di kedua sisi, seperti itu:
---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---
Frontmatter YAML mencakup serangkaian properti-kok dan nilai yang dipisahkan oleh usus besar-yang menentukan metadata khusus halaman. Kunci harus selalu ditulis persis seperti yang ditunjukkan dalam dokumentasi ini. Menulis Layout alih -alih layout misalnya akan menghasilkan kesalahan.
Ini adalah properti YAML dasar yang harus digunakan di frontmatter di setiap halaman.
| Kunci | Format | Bawaan | Keterangan |
|---|---|---|---|
description | teks | - | Deskripsi singkat dari konten halaman |
eleventyNavigation | Yaml | - | Objek YAML, dijelaskan di bawah ini |
image | teks | - | Nama file gambar yang harus digunakan untuk kartu media sosial |
layout * | teks | - | Tata letak halaman |
permalink | teks | bermacam-macam | Permalink halaman |
title * | teks | - | Judul halaman |
Judul dan tata letak halaman diperlukan pada setiap file penurunan harga. Tata letak halaman menentukan bagaimana konten ditampilkan. Saat membuat halaman baru, Anda harus menggunakan tata letak project , post , atau page .
Properti description sangat disarankan untuk semua halaman karena digunakan untuk kartu media sosial dan ditampilkan dalam hasil mesin pencari. Seharusnya antara 50 dan 160 karakter, dan tidak boleh diduplikasi di berbagai halaman.
Jika menggunakan image untuk media sosial, lihat dokumentasi yang disediakan oleh platform media sosial untuk panduan tentang ukuran gambar yang sesuai. Sebagai aturan praktis, jpg lebar 1200px format lanskap harus sesuai di sebagian besar platform.
Properti permalink memungkinkan Anda untuk mengatur URL untuk halaman atau mematikannya sepenuhnya. Permalink selalu dihasilkan secara otomatis, jadi Anda jarang perlu menggunakan properti ini.
Properti eleventyNavigation sedikit lebih kompleks. Ini memberi tahu Plugin Navigasi Kesebelas apa yang harus dimasukkan ke dalam menu. Ini adalah contoh dari properti yang digunakan pada tentang tentang halaman /content/pages/about.md :
---
layout : default
title : About
eleventyNavigation :
key : About
order : 0
---
Sub-property key memberi tahu Eleventy untuk menambahkan halaman ini ke navigasi dengan teks "tentang". Sub-property order memberi tahu Eleventy bahwa itu harus didahulukan dalam navigasi.
Anda juga dapat menambahkan tautan eksternal ke navigasi, misalnya tautan ke github Anda. Lihat halaman /content/pages/github.md untuk contoh dengan frontmatter berikut:
Jika Anda ingin menambahkan tautan eksternal ke navigasi, Anda dapat membuat file markdown baru (misalnya, /content/external.md ) dengan frontMatter di bawah ini:
---
eleventyNavigation :
key : GitHub ↗
order : 3
url : http://github.com/sb-ph/portfolio-starter
permalink : false
---
Sub-property key memberi tahu Eleventy untuk menambahkan halaman ini ke navigasi dengan teks "GitHub" ( ↗ adalah kode HTML untuk panah timur laut). Sub-property order diatur ke 3 sehingga datang terakhir di menu, dan sub-property url diatur ke URL yang diinginkan. Properti permalink diatur ke false sehingga ini tidak menerbitkan halaman yang sesuai di situs web kami.
Halaman ditemukan di folder /content/pages .
layout halaman harus diatur ke page di frontmatter. Halaman hanya mendukung properti dasar yang tercantum di atas.
Posting ditemukan di folder /content/posts .
layout pos harus diatur untuk post di frontmatter. Posting mendukung properti dasar serta properti date . Ini adalah contoh dari frontmatter posting:
---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---
Properti date menentukan tanggal publikasi posting dan dengan demikian pesanan di blog dan RSS.
Anda dapat menggunakan komentar HTML <!--more--> dalam konten penurunan harga Anda untuk menghasilkan kutipan untuk posting Anda seperti demikian:
Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<!-- more -->
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Jika Anda menggunakan more komentar, hanya teks yang sebelum komentar yang akan ditampilkan di blog dan tautan "baca lebih lanjut" yang akan ditampilkan setelah kutipan ini.
Proyek ditemukan di folder /content/projects .
layout proyek harus diatur untuk project di frontmatter. Proyek mendukung properti dasar serta properti dateStart , dateEnd , dan media . Ini adalah contoh dari frontmatter untuk halaman proyek.
---
layout : project
title : Your project title
dateStart : 1988-02-01
dateEnd : 2001-03-01
media :
- type : image
filename : cloud-01.jpeg
size : md
alt : A cloud
caption : A collaboration with [Piper Haywood](https://piperhaywood.com)
- type : video
filename : ria-pacquee.mp4
controls : false
caption : A piece by [Ria Pacquée](http://riapacquee.com/)
---
Dan ini adalah properti khusus proyek secara lebih rinci:
| Kunci | Format | Bawaan | Keterangan |
|---|---|---|---|
dateEnd * | YYYY-MM-DD | - | Tanggal akhir proyek Anda, digunakan untuk tujuan penyortiran |
dateStart | YYYY-MM-DD | - | Tanggal Mulai Proyek Anda |
media | Yaml | - | Daftar blok media YAML, dijelaskan di bawah ini |
Properti media adalah daftar YAML yang diformat secara ketat yang dapat berisi blok gambar dan video. Properti yang berlaku untuk gambar dan video diuraikan di bawah ini.
| Kunci | Format | Bawaan | Keterangan |
|---|---|---|---|
caption | penurunan harga | - | Keterangan yang menggambarkan media Anda |
filename * | teks | - | Nama file media Anda |
height | bilangan bulat | - | Ketinggian media Anda dalam piksel |
width | bilangan bulat | - | Lebar media Anda dalam piksel |
size | teks | lg | Ukuran yang harus ditampilkan media; sm , md , atau lg |
type * | teks | - | image atau video |
Blok gambar mendukung properti tambahan berikut:
| Kunci | Format | Bawaan | Keterangan |
|---|---|---|---|
alt * | teks | - | Teks alt untuk gambar Anda |
featured | Boolean | PALSU | Apakah gambar harus digunakan untuk mewakili proyek ini |
Properti featured digunakan untuk menentukan gambar mana yang harus digunakan untuk mewakili proyek ini di beranda. Jika beberapa gambar ditandai sebagai ditampilkan, maka yang pertama akan digunakan.
Blok video memungkinkan properti tambahan berikut. Perhatikan bahwa Autoplay Video hanya didukung di browser dan perangkat tertentu.
| Kunci | Format | Bawaan | Keterangan |
|---|---|---|---|
controls | Boolean | PALSU | Apakah kontrol video harus ditampilkan atau tidak |
loop | Boolean | PALSU | Apakah video harus berulang atau tidak |
autoplay | Boolean | PALSU | Apakah video harus diputar secara otomatis atau tidak |
muted | Boolean | PALSU | Apakah videonya harus diredam atau tidak |
Beranda adalah file /content/index.md .
layout beranda harus diatur ke home di frontmatter. Beranda mendukung sebagian besar sifat dasar, namun properti permalink tidak boleh digunakan.
Properti entries tambahan memungkinkan Anda untuk menentukan dengan tepat proyek mana yang ingin Anda tampilkan di beranda. Jika properti entries tidak diisi, maka beranda akan secara otomatis menampilkan semua proyek secara berurutan terlebih dahulu.
Ini adalah contoh properti entries yang digunakan:
---
layout : home
entries :
- portfolio-starter
- sample-project-muybridge
- sample-project-optics
- sample-project-eames
- sample-project-letters
- sample-project-traffic-signs
---
Gambar featured pertama untuk setiap proyek ditampilkan. Jika tidak ada gambar yang featured , maka gambar pertama akan ditampilkan.
Halaman blog adalah file /content/posts.md .
layout halaman blog harus diatur ke posts di frontmatter. Halaman blog mendukung properti dasar. Markdown tertulis di bawah frontmatter tidak ditampilkan.
Halaman kesalahan 404 adalah file /content/404.md .
layout halaman 404 harus diatur ke error di frontmatter. Halaman kesalahan hanya mendukung layout dan title properti dasar. Properti permalink tidak boleh digunakan.
Halaman RSS adalah file /content/rss.md .
layout halaman RSS harus disetel untuk feed di frontmatter. Halaman RSS hanya mendukung layout dan title properti dasar. Properti permalink tidak boleh digunakan.
Umpan RSS secara otomatis diterbitkan ke /feed.xml , jadi misalnya https://yoursite.com/feed.xml . Jika Anda ingin menambahkan tautan RSS di navigasi Anda, lihat panduan Properti Dasar untuk menambahkan tautan eksternal.
Semua media disimpan di folder /content/media .
File media harus sekecil mungkin untuk menghemat ruang di repositori GitHub Anda dan hosting Anda. Baca lebih lanjut tentang batas repositori GitHub. File media yang lebih kecil juga akan memuat lebih cepat untuk pembaca Anda.
Gambar kecil harus sekitar 800px lebar, gambar sedang harus sekitar 1400px, dan gambar besar harus sekitar 3000px lebar. Gambar dengan area yang luas dengan warna datar dapat bekerja paling baik sebagai PNG. Gambar dengan lebih detail seperti fotografi harus disimpan sebagai JPG.
Semakin banyak gambar yang Anda tambahkan ke halaman, semakin lama waktu yang dibutuhkan halaman itu. Bersikaplah bijaksana tentang berapa banyak gambar yang Anda tambahkan ke satu halaman.
Seperti disebutkan di atas, ini adalah basis kode dasar yang sengaja menyambut bermain -main.
Kustomisasi yang lebih kecil seperti mengubah CSS dapat dilakukan tanpa baris perintah dengan mengedit file CSS secara langsung di GitHub. Kustomisasi yang lebih luas paling baik dilakukan dengan mengembangkan secara lokal dengan baris perintah. Lihat Dokumentasi Eleventy Jika Anda tertarik untuk mengubah tata letak Nunjucks atau cuplikan di /_includes .
Ini adalah beberapa saran untuk mengubah dan memperluas situs ini:
/_includes/layouts/base.njk untuk membuat footer yang lebih kompleksclient atau categoryimgix sehingga media Anda tidak hidup di githubJika Anda tertarik dengan bantuan kami membuat beberapa modifikasi, hubungi saja dan kami akan membahas!
