Tantara vaovao

Ahoana ny fomba hametrahana bilaogy Hugo amin'ny GitHub pejy miaraka amin'ny hetsika

ny Oleg Pustovit5m2025/04/30
Read on Terminal Reader

Lava loatra; Mamaky

Nanangana bilaogy ara-teknika kely aho amin'ny fampiasana Hugo ho an'ny famoronana tranonkala statika, Caddy ho an'ny SSL eo an-toerana, ary GitHub Pages ho an'ny fampiantranoana maimaim-poana. Ity toro-hevitra ity dia mandeha amin'ny safidiko, dingana fametrahana, olana mahazatra, ary fametrahana
featured image - Ahoana ny fomba hametrahana bilaogy Hugo amin'ny GitHub pejy miaraka amin'ny hetsika
Oleg Pustovit HackerNoon profile picture

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.tomlAorian'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'nylocalhostSatria manamboatra amin'ny Cloud VM avy any ivelany aho, miditra amin'ny mpizara Hugo eo an-toerana amin'ny alalan'nylocalhostTsy 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_proxyfanambarana 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 nyANy rakitra DNS amin'nytest-blog-domain.comdia 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 nythemeNy parametra aohugo.tomlNifidy ny lohahevitra antsoina hoecactusTaorian'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'nygithubNy 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-pagesSoa 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'nypublicNy mpitarika dia mialoha ny fandefasanagh-pagesAnkoatra 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


Trending Topics

blockchaincryptocurrencyhackernoon-top-storyprogrammingsoftware-developmenttechnologystartuphackernoon-booksBitcoinbooks