ახალი ისტორია

How to Deploy a Hugo Blog to GitHub Pages ერთად ფუნქციები

მიერ Oleg Pustovit5m2025/04/30
Read on Terminal Reader

Ძალიან გრძელი; Წაკითხვა

მე შექმნა მარტივი ტექნიკური დღიურში გამოყენებით Hugo სტატისტიკური საიტზე გენერაციის, Caddy ადგილობრივი SSL, და GitHub გვერდები უფასო ჰოსტინგი. ეს მიმოხილვა ჩემი არჩევანი, setup ნაბიჯები, საერთო პრობლემები, და განთავსება
featured image - How to Deploy a Hugo Blog to GitHub Pages ერთად ფუნქციები
Oleg Pustovit HackerNoon profile picture

მას შემდეგ, რაც წლების განმავლობაში პროგრამული უზრუნველყოფის შექმნა და ტექნიკური დოკუმენტაციის შექმნა, გადაწყვიტოს, რომ შექმნათ დღიური, რათა გაუზიაროთ ჩემი გამოცდილება და დაგეხმაროთ სხვებს მსგავსი მოგზაურობა. ამ სტატიაში განიხილება, თუ როგორ მე შექმნათ ჩემი ტექნიკური დღიური, განკუთვნილია ახალი დღიური ან Hugo.

აირჩიეთ პლატფორმა

მიუხედავად იმისა, რომ ჩემი საკუთარი Markdown-to-HTML გამოქვეყნების სკრიპტის შექმნა არის იდეა მომავალში, ჩემი უპირატესობა იყო დღიურში სწრაფად ონლაინ.


დღეს, მე არ ვფიქრობ, რომ არსებობს პრობლემა შექმნის პირადი საიტზე. არსებობს მრავალფეროვანი ვარიანტი, რომელიც დაგეხმარებათ ამ მიზნით. მე დაიწყებ ამ ვარიანტიების სიაში, რომლებიც მივიღებენ ჩემი აზრით:


  • CMS (გალითად, WordPress, Content Hub, Joomla, და ა.შ.): მიუხედავად იმისა, რომ პლატფორმაები, როგორიცაა WordPress, ძლიერია, ისინი გრძნობენ უამრავი სტატისტიკური შინაარსი დღიურში.


  • Jekyll: ეს პროგრამული უზრუნველყოფა φαίνεται სრულყოფილი და ფართოდ გამოიყენება სხვა განვითარებლები ბლოგები, მაგრამ იმის გამო, რომ ჩემი გამოცდილება Ruby, მე აირჩიე არ გამოიყენოთ ეს.


  • HUGO. HUGO არის წერილი Go და იყენებს ცნობილი სინთასკას Go ნიმუშები (ან თქვენ ჩანს, რომ კოდირება ბევრი Go), ხოლო rendering გვერდებზე Markdown (დაწვრილებით Jekyll).


  • 11ty, Astro, Hexo და სხვა Node.js დაფუძნებული ვარიანტიები. ეს არის უპირატესობა, მაგრამ პირდაპირი, მე გადაწყვიტოს, რომ შეამციროს გამოყენების Node.js ინსტრუმენტები. მიუხედავად იმისა, რომ არსებობს ბევრი ძლიერი ინსტრუმენტები, Node.js ოკსიპედია ცნობილია, რომ სწრაფად ცვლილება, რაც ხშირად გააჩნია, რომ მე არ შეუძლიათ გამოიყენოთ ძველი პროექტები, რომლებიც ბუნებრივია ბევრი ძველი დამოკიდებულებები.

HUGO განთავსება

მე აირჩიე Hugo ჩემი დღიურების პლატფორმა. მას შემდეგ, რაც დიდი რაოდენობით დოკუმენტაცია ჩემი ბოლო პროგრამული უზრუნველყოფის დაკავშირებული პროექტებს, მე გრძნობს ძალიან დარწმუნებული, რომ გამოიყენოთ Markdown და ტერმინალში დაფუძნებული ტექსტის რედაქტორი ჩემი წერილებისთვის.

გამოყენება GitHub Repository

Previously, მე უკვე შექმნა GitHub Pages ვებგვერდზე ადგილობრივი ფაილი და დაკავშირებული დონეზე მას, ასე რომ ფაილი შეუზღუდავი repo, თქვენ უნდა შეამოწმოთ შემდეგი ბრძანება:

hugo new site . --force


ეს შეიცავს ამჟამად ხელმისაწვდომი repository დირექტორიის ფაილი, რომლებიც საჭიროა Hugo ვებგვერდზე. მას შემდეგ, რაც საჭიროა დააყენოთ თემა და სხვა პარამეტრებიhugo.tomlმას შემდეგ, რაც ყველაფერი დააყენა, ეს შესაძლებელია სერვერზე, დააწკაპუნეთ პარამეტრები:hugo server

Server- ის გაუმჯობესება Developer Mode- ში

ამჟამად, საიტზე ხელმისაწვდომიაlocalhostმას შემდეგ, რაც მე განვითარება remote cloud VM, ხელმისაწვდომობა ადგილობრივი Hugo სერვერზე მეშვეობითlocalhostეს არ არის შესაძლებელი. საჭიროა უსაფრთხოდ გააჩნოს localhost instance გარე მსოფლიოში - ასეთი საჭიროებებისთვის, შეუზღუდავი proxy გამოიყენება.


მიუხედავად იმისა, რომ load balancers და reverse proxies, როგორიცაა Nginx, ძალიან პოპულარული და პოპულარული, მე აირჩიეCaddyჩემი dev ვებგვერდზე მომსახურება, რადგან SSL სერტიფიკატები (თუ Let’s Encrypt) არ დაეხმარება.Caddyგააკეთა ერთადCaddyfile, სადაც სასარგებლო სფეროში თქვენ წაიკითხე areverse_proxyშეტყობინება საჭირო პორტზე:

test-blog-domain.com {
	reverse_proxy localhost:1313
}

მას შემდეგ, რაც Caddy დაიწყება ზემოთ კონფიგურაციაზე, განვითარების საიტი ხელმისაწვდომიაhttps://test-blog-domain.com(სავარაუდოდ, რომ ერთიADNS რეგისტრაციაtest-blog-domain.comეს არის Public IP Address (მომცველი IP მისამართი).

დამატება Theme

HUGO აქვს რამდენიმე უფასო ტომები, რომლებიც პოპულარულად ხელმისაწვდომია GitHub. რა უნდა გააკეთოთ, რათა დააინსტალიროთ ერთ-ერთი, არის კლონის რეპუტატორი ერთად ტომარა და შემდეგ განახლებაthemeპარამეტრებიhugo.tomlმე აირჩიე თემა, რომელიც მოუწოდაcactusმას შემდეგ, რაც ინსტალაცია, მივიღე შექმნის შეცდომა, რომ Google Analytics async Template არ იპოვება:

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

ასეთი პრობლემის გადაწყვეტა შეიძლება იპოვდესgithubHugo საზოგადოება აქტიურია, და ბევრი პრობლემები - მათ შორის ეს Google Analytics შეცდომა - არსებობს ხელმისაწვდომი პაკეტები ან განიხილება GitHub.


მას შემდეგ, რაც სხვა შეზღუდვის შეზღუდვა შეზღუდვა, საიტზე დაიწყო მუშაობა:

ვებგვერდზე CDN: GitHub Pages

არსებობს მრავალფეროვანი გზა სტატისტიკური საიტზე განახლება, და ყველაზე შემთხვევაში, საჭიროა ჰოსტინგი ან სერვერზე. ზოგადად, ეს არ არის უფასო ან აქვს შეზღუდული გეგმა; თუმცა, არსებობს მოთხოვნები ამ, როგორიცაა GitHub Pages. შესაძლებელია განახლება სტატისტიკური შინაარსის კონკრეტული ფართობი GitHub repository ან გამოიყენოთ წინასწარ დამზადებული GitHub ოპერაციები, რომლებიც დაფუძნებულია შექმნა არქიტექტები და განახლება მათ მორგებული გზა.


გაითვალისწინოს, რომ პირადი GitHub ანგარიშები ძალიან შეზღუდულია შენახვის artefacts სართულზე, და ეს არის შეუზღუდავი მართვა, რომ შენახვის სართულზე, მე აირჩიე უფრო მარტივი გადაწყვეტილება, სადაც სტატისტიკური საიტზე მოცულობა განახლდება წინასწარ განკუთვნილია git სართულზე (gh-pagesბედნიერი, რომ არსებობსactionsგანსაკუთრებით HUGO, მხოლოდ ამ მიზნით:


  • Shohei Ueda- ის actions-hugo. მარტივი გზა, რათა დააყენოთ Hugo GitHub- ში
  • ასევე, Shohei Ueda- ის მიერ, ეს ოპერაცია აჩქარებს სტატისტიკური მოცულობა კონკრეტული ფართობი.


Here’s the code of a GitHub Actions workflow that will deploy Hugo to gh-pages. Note that if there’s a need for a custom domain, a CNAME file needs to be copied to the publicდირექტორი, სანამ იღებსgh-pagesგარდა ამისა, თქვენი repository- ის სამუშაო ფოსტის საშუალებას უნდა დააყენოთ “Read and Write” (სახლა და წაიკითხე)Settings > Actions > General) და

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

მას შემდეგ, რაც განთავსება დასრულდა, საიტზე უნდა ჩამოტვირთოთ GitHub CDN. დარწმუნდით, რომ დააყენოთ GitHub Pages ფართობი, რომელიც შეიცავს built-in artefacts შემთხვევაში, თუ საიტზე არ მუშაობს.


მას შემდეგ, რაც HUGO დააყენა და გააყენა, ახლა მე შეგვიძლია განკუთვნილია, რაც მნიშვნელოვანია - გაზიარება ტექნიკური მიმოხილვა ჩემი გამოცდილება. მე ვფიქრობ, რომ ეს მიმოხილვა დაეხმარება სხვებს, რომლებიც ეძებენ შექმნათ მარტივი და საიმედო დღიურში მათი მუშაობისთვის.

დაკავშირებული რესურსები

  • Repository ამ საიტზე
  • HUGO სწრაფი დაწყება
  • DNS კონფიგურაცია GitHub გვერდებზე
  • Cactus თემა HUGO
  • Google Analytics ინსტალაცია Hugo- ში
  • Caddy Reverse Proxy სწრაფი დაწყება


Trending Topics

blockchaincryptocurrencyhackernoon-top-storyprogrammingsoftware-developmenttechnologystartuphackernoon-booksBitcoinbooks