|
| 1 | +--- |
| 2 | +title: "Creating a blog with Hugo and GitHub Pages" |
| 3 | +date: 2025-11-21 |
| 4 | +draft: false |
| 5 | +ShowToc: true |
| 6 | +author: "Jason" |
| 7 | +tags: ["writing"] |
| 8 | +--- |
| 9 | + |
| 10 | +> _A hands-on guide to creating a blog with Hugo and GitHub Pages._ |
| 11 | +
|
| 12 | + |
| 13 | + |
| 14 | +## Prerequisites |
| 15 | + |
| 16 | +- A [GitHub](https://github.com/) account |
| 17 | +- Installed [Microsoft Visual Studio Code](https://code.visualstudio.com/download) |
| 18 | +- Installed [Git](https://git-scm.com/downloads) |
| 19 | +- Installed [Snap](https://snapcraft.io/docs/installing-snap-on-ubuntu) |
| 20 | + |
| 21 | +If you are not familiar with Git, you can refer to [the simple guide](https://rogerdudler.github.io/git-guide/). |
| 22 | + |
| 23 | +## Installation |
| 24 | + |
| 25 | +### Install Hugo |
| 26 | + |
| 27 | +```bash |
| 28 | +sudo snap install hugo |
| 29 | +hugo version # test installation |
| 30 | +``` |
| 31 | + |
| 32 | +### Install PaperMod Theme |
| 33 | + |
| 34 | +```bash |
| 35 | +mkdir -p homepages && cd homepages |
| 36 | +hugo new site mywebsite --format=yaml && cd mywebsite |
| 37 | +git init |
| 38 | +git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod |
| 39 | +echo "theme: PaperMod" >> hugo.yaml |
| 40 | +``` |
| 41 | + |
| 42 | +After the installation, you should have a directory structure like this: |
| 43 | +```bash |
| 44 | +. |
| 45 | +└── mywebsite |
| 46 | + ├── archetypes |
| 47 | + ├── assets |
| 48 | + ├── content # blog posts |
| 49 | + ├── data |
| 50 | + ├── hugo.yaml # configuration file |
| 51 | + ├── i18n |
| 52 | + ├── layouts |
| 53 | + ├── public |
| 54 | + ├── static |
| 55 | + └── themes |
| 56 | +``` |
| 57 | +You can test the blog locally by running: |
| 58 | +```bash |
| 59 | +# in the mywebsite directory |
| 60 | +hugo server -D |
| 61 | +``` |
| 62 | +## Create the first blog locally |
| 63 | +Create a new blog post: |
| 64 | +```bash |
| 65 | +hugo new about.md # create content/about.md |
| 66 | +``` |
| 67 | +Edit the content of the file: |
| 68 | +```bash |
| 69 | +--- |
| 70 | +title: "About" |
| 71 | +date: 2025-11-22 |
| 72 | +draft: false |
| 73 | +ShowToc: true |
| 74 | +author: "Jason" |
| 75 | +tags: ["about"] |
| 76 | +--- |
| 77 | +Hi! I am a new blog post. |
| 78 | +``` |
| 79 | + |
| 80 | +Edit the configuration file: |
| 81 | +```bash |
| 82 | +baseURL: https://AgentScaleLab.github.io |
| 83 | +languageCode: en-us |
| 84 | +title: Jason'Log |
| 85 | +theme: PaperMod |
| 86 | +params: |
| 87 | + defaultTheme: dark |
| 88 | + ShowReadingTime: true |
| 89 | + ShowAllPagesInArchive: true |
| 90 | + ShowWordCount: true |
| 91 | + homeInfoParams: |
| 92 | + Title: "\U0001F44B Welcome to Jason'Log" |
| 93 | + Content: >- |
| 94 | + Hi, this is Jason. I'm documenting my learning notes in this blog since 2025. |
| 95 | + socialIcons: |
| 96 | + - name: email |
| 97 | + url: 'xxx@outlook.com' |
| 98 | + - name: github |
| 99 | + url: 'https://github.com/AgentScaleLab' |
| 100 | +menu: |
| 101 | + main: |
| 102 | + - identifier: about |
| 103 | + name: About |
| 104 | + url: / |
| 105 | + weight: 20 |
| 106 | +
|
| 107 | +``` |
| 108 | +
|
| 109 | +Build the blog locally: |
| 110 | +```bash |
| 111 | +hugo server -D |
| 112 | +``` |
| 113 | +If you want to organize your blogs in folders, following the steps below: |
| 114 | +
|
| 115 | +Organize your blog posts in folders: |
| 116 | +```bash |
| 117 | +content/ |
| 118 | +├── posts |
| 119 | +├── projects |
| 120 | +└── tags |
| 121 | +``` |
| 122 | +Modify the configuration file: |
| 123 | +```bash |
| 124 | +# hugo.yaml |
| 125 | +... |
| 126 | +menu: |
| 127 | + main: |
| 128 | + - identifier: posts |
| 129 | + name: Blog |
| 130 | + url: /posts/ |
| 131 | + weight: 20 |
| 132 | + - identifier: projects |
| 133 | + name: Project |
| 134 | + url: /projects/ |
| 135 | + weight: 20 |
| 136 | + - identifier: tags |
| 137 | + name: Tags |
| 138 | + url: /tags/ |
| 139 | + weight: 20 |
| 140 | +
|
| 141 | +``` |
| 142 | +
|
| 143 | +
|
| 144 | +## Deploy to GitHub Pages |
| 145 | +
|
| 146 | +Create a new repository named **YOUR-NAME-ON-GITHUB.github.io** on GitHub. |
| 147 | +
|
| 148 | +Link the local repository to GitHub: |
| 149 | +```bash |
| 150 | +cd mywebsite |
| 151 | +git remote add origin git@github.com:AgentScaleLab/AgentScaleLab.github.io |
| 152 | +``` |
| 153 | +Push the local repository to GitHub: |
| 154 | +```bash |
| 155 | +git status |
| 156 | +git add . |
| 157 | +git commit -m "first commit" |
| 158 | +git push -u origin main |
| 159 | +``` |
| 160 | +
|
| 161 | +Change the settings of the repository on GitHub: |
| 162 | +1. Enable "Read and write permissions" under "Actions" -> "General". |
| 163 | +2. Under "Pages", set the source to "Deploy from a branch" and select "Github Actions" as the workflow. |
| 164 | +3. Search and click "hugo" template workflow. |
| 165 | +4. Under "Actions", click "Run workflow"." |
| 166 | +
|
| 167 | + |
| 168 | +
|
| 169 | +If the deployment is not successful, you can modify the workflow file in the **.github/workflows** folder. The template workflow file is as follows: |
| 170 | +
|
| 171 | +```yaml |
| 172 | +# Sample workflow for building and deploying a Hugo site to GitHub Pages |
| 173 | +name: Deploy Hugo site to Pages |
| 174 | +
|
| 175 | +on: |
| 176 | + # Runs on pushes targeting the default branch |
| 177 | + push: |
| 178 | + branches: ["master"] |
| 179 | +
|
| 180 | + # Allows you to run this workflow manually from the Actions tab |
| 181 | + workflow_dispatch: |
| 182 | +
|
| 183 | +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages |
| 184 | +permissions: |
| 185 | + contents: read |
| 186 | + pages: write |
| 187 | + id-token: write |
| 188 | +
|
| 189 | +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. |
| 190 | +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. |
| 191 | +concurrency: |
| 192 | + group: "pages" |
| 193 | + cancel-in-progress: false |
| 194 | +
|
| 195 | +# Default to bash |
| 196 | +defaults: |
| 197 | + run: |
| 198 | + shell: bash |
| 199 | +
|
| 200 | +jobs: |
| 201 | + # Build job |
| 202 | + build: |
| 203 | + runs-on: ubuntu-latest |
| 204 | + env: |
| 205 | + HUGO_VERSION: 0.146.0 |
| 206 | + steps: |
| 207 | + - name: Install Hugo CLI |
| 208 | + run: | |
| 209 | + wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \ |
| 210 | + && sudo dpkg -i ${{ runner.temp }}/hugo.deb |
| 211 | + - name: Install Dart Sass |
| 212 | + run: sudo snap install dart-sass |
| 213 | + - name: Checkout |
| 214 | + uses: actions/checkout@v4 |
| 215 | + with: |
| 216 | + submodules: recursive |
| 217 | + - name: Setup Pages |
| 218 | + id: pages |
| 219 | + uses: actions/configure-pages@v5 |
| 220 | + - name: Install Node.js dependencies |
| 221 | + run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true" |
| 222 | + - name: Build with Hugo |
| 223 | + env: |
| 224 | + HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache |
| 225 | + HUGO_ENVIRONMENT: production |
| 226 | + run: | |
| 227 | + hugo \ |
| 228 | + --minify \ |
| 229 | + --baseURL "${{ steps.pages.outputs.base_url }}/" |
| 230 | + - name: Upload artifact |
| 231 | + uses: actions/upload-pages-artifact@v3 |
| 232 | + with: |
| 233 | + path: ./public |
| 234 | +
|
| 235 | + # Deployment job |
| 236 | + deploy: |
| 237 | + environment: |
| 238 | + name: github-pages |
| 239 | + url: ${{ steps.deployment.outputs.page_url }} |
| 240 | + runs-on: ubuntu-latest |
| 241 | + needs: build |
| 242 | + steps: |
| 243 | + - name: Deploy to GitHub Pages |
| 244 | + id: deployment |
| 245 | + uses: actions/deploy-pages@v4 |
| 246 | +
|
| 247 | +``` |
| 248 | +
|
| 249 | +## Update the blog posts |
| 250 | +```bash |
| 251 | +cd mywebsite && git pull # make sure the local repository is up to date |
| 252 | +# modify the content in the content/ folder |
| 253 | +git status # check the changes |
| 254 | +git add . |
| 255 | +git commit -m "update blog posts" |
| 256 | +git push origin main |
| 257 | +``` |
| 258 | +
|
| 259 | +## Notes |
| 260 | +1. Hugo only shows the articles that are published before the current date. |
0 commit comments