Taorian'ny taona maro nanamboatra rindrambaiko sy manoratra antontan-taratasy ara-teknika, dia nanapa-kevitra ny hamoronana bilaogy mba hizara ny traikefako sy hanampy ny hafa amin'ny diany mitovy.
Manapa-kevitra ny hifidy ny sehatra
Raha ny famolavolana ny script Markdown-to-HTML dia hevitra ho an'ny hoavy, ny laharam-pahamehako dia ny hahazo ny bilaogy amin'ny aterineto haingana.
Amin'izao fotoana izao, tsy mino aho fa misy olana amin'ny famoronana tranonkala manokana. Misy safidy maro samihafa izay manampy amin'ity ezaka ity.
- CMS (ohatra, WordPress, Content Hub, Joomla, sns.): Na dia ny sehatra toy ny WordPress dia mahery vaika aza, dia nahatsapa ho be loatra ho an'ny bilaogy votoaty static.
- Jekyll: Ity rindrambaiko ity dia toa tsara sy ampiasaina amin'ny ankapobeny amin'ny mpandraharaha hafa mba hanompo bilaogy, fa noho ny tsy fahampian'ny traikefako amin'ny Ruby, dia nifidy ny tsy hampiasa izany.
- Hugo. Hugo dia voasoratra ao amin'ny Go ary mampiasa ny famoronana malaza amin'ny Go templates (raha toa ianao ka mandika be ao amin'ny Go), raha mampiseho pejy ao amin'ny Markdown (ho toy ny Jekyll).
- 11ty, Astro, Hexo, ary ny safidy hafa mifototra amin'ny Node.js. Izany dia olana amin'ny safidy, fa manokana aho dia nanapa-kevitra ny hampihena ny fampiasana ny fitaovana Node.js. Na dia misy fitaovana mahery vaika aza, ny tontolo iainana Node.js dia malaza noho ny fiovana haingana, izay matetika nitondra ahy tsy afaka hampiasa ny tetikasa taloha izay natokana ho maro ny fitoviana taloha.
Ny fametrahana ny Hugo
Taorian'ny famokarana antontan-taratasy betsaka momba ny tetikasa mifandraika amin'ny rindrambaiko teo aloha, mahatsiaro tena matoky aho amin'ny fampiasana Markdown sy ny mpamoaka lahatsoratra mifototra amin'ny terminal ho an'ny soratako.
Mampiasa ny GitHub Repository
Taloha, efa namorona tranonkala GitHub Pages miaraka amin'ny rakitra toerana aho ary mifandray ny sehatra amin'izany, noho izany, mba hametraka rakitra ao amin'ny repo misy anao, mila manoratra ny baiko manaraka ianao:
hugo new site . --force
Izany dia hampitombo ny directory amin'izao fotoana izao amin'ny rakitra izay ilaina amin'ny fandefasana ny tranonkala Hugo. Taorian'izany dia ilaina ny mametraka ny lohahevitra sy ny parameters hafa ao amin'nyhugo.toml
Aorian'ny fametrahana ny zava-drehetra, dia azo atao ny manomboka ny mpizara amin'ny alàlan'ny fametrahana ny baiko:hugo server
Fandefasana ny server amin'ny fomba fampandrosoana
Amin'izao fotoana izao, ny tranonkala dia azo avy amin'nylocalhost
Satria manamboatra amin'ny Cloud VM avy any ivelany aho, miditra amin'ny mpizara Hugo eo an-toerana amin'ny alalan'nylocalhost
Tsy voatery ho azo antoka ny fametrahana ny instance localhost amin'ny tontolo ivelany - ho an'ny zavatra toy izany dia ampiasaina ny proxy reverse.
Na dia ireo balancers sy ny reverse proxies toy ny Nginx aza dia tena mahazatra sy malaza, dia nifidy ahoCaddymba hanompo ny tranokalan'ny developer satria mametraka sertifikaty SSL (amin'ny alalan'ny Let's Encrypt) tsy misy ezaka.CaddyIzany dia vita amin'nyCaddyfile
, izay ho an'ny sehatry ny tombontsoa ianao manoratra areverse_proxy
fanambarana miaraka amin'ny seranam-piaramanidina ilaina:
test-blog-domain.com {
reverse_proxy localhost:1313
}
Rehefa manomboka ny Caddy amin'ny fametrahana etsy ambony, ny tranonkala fampandrosoana dia ho azo avy amin'nyhttps://test-blog-domain.com
(Ary noho nyA
Ny rakitra DNS amin'nytest-blog-domain.com
dia voasoratra amin'ny adiresy IP ankapobeny amin'ny VM).
Ampiasao ny lohahevitra
Hugo dia manana lohahevitra maimaim-poana maro izay azo jerena amin'ny GitHub. Ny zavatra ilaina dia ny mametraka ny iray dia ny hanangona trano fitehirizana miaraka amin'ny lohahevitra ary avy eo manatsara nytheme
Ny parametra aohugo.toml
Nifidy ny lohahevitra antsoina hoecactus
Taorian'ny fametrahana, nahita fahadisoana iray aho izay mitaraina fa tsy hita ny template async amin'ny Google Analytics:
Error: error building site: render: failed to render pages: render of "/" failed: "/home/user/projects/nexo-tech.github.io/themes/cactus/layouts/_default/baseof.html:3:3": execute of template failed: template: index.html:3:3: executing "index.html" at <partial "head.html" .>: error calling partial: execute of template failed: html/template:partials/head.html:47:16: no such template "_internal/google_analytics_async.html"
make: *** [Makefile:2: up] Error
Ny vahaolana ho an'ny olana toy izany dia azo jerena ao amin'nygithub
Ny vondrom-piarahamonina Hugo dia mavitrika, ary olana maro - anisan'izany ity fahadisoana ity ao amin'ny Google Analytics - dia manana patches na adihevitra misy ao amin'ny GitHub.
Taorian'ny fanitsiana ny fampitandremana hafa, dia nanomboka niasa ny tranonkala:
Ny fametrahana tranonkala amin'ny CDN: GitHub Pages
Misy fomba maro ahafahana mampiasa tranonkala statika, ary amin'ny ankamaroan'ny toe-javatra dia ilaina ny manana fampiantranoana na mpizara. Matetika, ireo dia tsy maimaim-poana na manana drafitra voafetra; Na izany aza, misy ny fahazoan-dalana amin'izany, toy ny GitHub Pages. Azo atao ny manompo votoaty statika avy amin'ny sampan-draharahan'ny GitHub na mampiasa hetsika GitHub mialoha-miorina izay mifototra amin'ny famoronana artefacts sy ny fametrahana azy ireo amin'ny fomba manokana.
Noho izany, ny kaonty GitHub manokana dia voafetra be amin'ny sehatry ny fitehirizana, ary sarotra ny fitantanana izany sehatry ny fitehirizana, dia nifidy ny vahaolana tsotra izay hanatsarana ny tranonkala statika amin'ny sehatra git voafaritra (gh-pages
Soa ihany fa misyactionsmanokana ho an'i Hugo, ho an'ity tanjona ity:
- actions-hugo avy amin'i Shohei Ueda. fomba tsotra hanangana Hugo ao amin'ny tontolo GitHub Actions
- koa, amin'ny alalan'ny Shohei Ueda, ity hetsika ity dia mitondra ny fananana static ho any amin'ny orinasa voafaritra.
Ity ny code avy amin'ny GitHub Actions workflow izay hametraka Hugo amin'ny gh-pages. Tsarovy fa raha ilaina ny sehatra manokana, ny CNAME rakitra dia mila kopia amin'nypublic
Ny mpitarika dia mialoha ny fandefasanagh-pages
Ankoatra izany, ny fahazoan-dalana amin'ny workflow ao amin'ny repository dia tsy maintsy napetraka amin'ny "Ready and write" (mahita ao amin'nySettings > Actions > GeneralNy
name: Build and Deploy Hugo
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v3
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
extended: true
- name: Build site
run: hugo --minify
- name: Add CNAME file
run: cp CNAME public/CNAME
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
publish_branch: gh-pages
Rehefa tapitra ny fametrahana, ny tranonkala dia tokony ho nalefa any amin'ny CDN GitHub. Ataovy azo antoka fa mametraka GitHub Pages ho an'ny sampan-draharaha izay ahitana fitaovana voajanahary raha tsy miasa ny tranonkala.
Amin'ny fametrahana sy fametrahana Hugo, afaka mifantoka amin'ny zava-dehibe aho amin'izao fotoana izao - mizara fahalalana ara-teknika avy amin'ny traikefako. Manantena aho fa manampy ireo hafa mitady hanangana bilaogy tsotra sy azo itokisana ho an'ny asany ity toro-hevitra ity.
Ny loharanom-baovao mifandraika
- Repository ho an'ity tranonkala ity
- Hugo haingana ny fanombohan'ny
- Ny fametrahana ny DNS ho an'ny GitHub Pages
- Cactus lohahevitra ho an'ny Hugo
- Ny fametrahana ny Google Analytics ao Hugo
- Caddy Reverse Proxy dia manomboka haingana