[{"content":"I tried creating my first website using HUGO . Here, I\u0026rsquo;ll leave a record of the steps as a memorandum.\nStatic Site Generators Feature Plain HTML Jekyll Hugo Language Base HTML/CSS/JS Ruby Go Setup None Medium Somewhat Hard GitHub Pages ◎ (Direct) ◎ (Official) ○ (Push after build) Build Speed – Slow Ultra-fast Multilingual Manual Partially ◎ (Standard) Templates/Themes Manual Many Very Many Best For Small/Free Medium/Blog Medium-Large/Multi-lang This time, I decided to use Hugo. The key points for this choice were:\nFor sites where pages will increase, like a blog or research log, Jekyll or Hugo are suitable. I want to support both Japanese and English → Hugo is a good fit. Auto-deployment with GitHub Actions is easy with Hugo. Environment Setup Installing Hugo For macOS:\nbrew install hugo If you can confirm the version with hugo version, you\u0026rsquo;re good to go.\nCreating a New Site In your desired location, enter the following command (replace my-website with any name you like):\nhugo new site my-website cd my-website Selecting a Website Theme Theme Features hugo-coder Simple \u0026amp; lightweight. Suitable for profile sites. PaperMod Easy to read \u0026amp; blog format. Popular for academic use. Academic (Wowchemy) Best for researchers. Supports publication lists and project intros. A bit heavy. This time, I chose PaperMod.\nAfter moving to the website directory created above, I cloned the theme with the following commands:\ngit init git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod This completes the environment setup.\nHow to Create Web Pages with Hugo Creating web page content is basically done by editing Markdown files. Based on the created md files, Hugo outputs the static site as HTML.\nFile Structure . ├── .github/ │ └── workflows/ │ └── deploy.yml # Automation by means of Github Actions ├── archetypes/ │ └── default.md # Template for markdown files ├── assets/ ├── content/ # Create site content here │ ├── en/ # For English │ │ │── _index.md # Description for the section\u0026#39;s top page │ │ └── blog/ │ │ │── _index.md # Description for the section\u0026#39;s top page │ │ └── 01-first-post.md # Content for the page │ └── ja/ # For Japanese │ ├── _index.md │ └── blog/ │ │── _index.md # Description for the section\u0026#39;s top page │ └── 01-first-post.md # Content for the page ├── data/ ├── hugo.toml # Site configuration ├── i18n/ ├── layouts/ ├── public/ # Generated static site by Hugo (output) ├── static/ └── themes/ └── PaperMod/ ├── ... (Theme files) Configuration of archetypes/default.md By setting this up, you can create a template for your markdown files generated by hugo new \u0026lt;file-name\u0026gt;.md.\n--- date: \u0026#39;{{ .Date }}\u0026#39; draft: true title: \u0026#39;{{ replace .File.ContentBaseName \u0026#34;-\u0026#34; \u0026#34; \u0026#34; | title }}\u0026#39; type: \u0026#39;{{ .Section }}\u0026#39; tags: [] categories: [] --- Configuration of hugo.toml This is the central file for managing the entire Hugo site\u0026rsquo;s configuration. It determines the site\u0026rsquo;s appearance, functionality, and structure.\nbaseURL = \u0026#39;https://riichisugai.github.io/\u0026#39; # Public URL of the site languageCode = \u0026#39;en-us\u0026#39; # Main language of the site theme = \u0026#34;PaperMod\u0026#34; # Theme design to use title = \u0026#39;Riichi Sugai\u0026#39; # Title of the site relativeURLs = false # Disable relative URLs canonifyURLs = true # Use absolute URLs # Explicitly set the default language defaultContentLanguage = \u0026#34;en\u0026#34; defaultContentLanguageInSubdir = true # Multilingual support settings [languages] # English page settings [languages.en] weight = 1 languageName = \u0026#34;English\u0026#34; contentDir = \u0026#34;content/en\u0026#34; # Directory where the site\u0026#39;s content is located mainSections = [\u0026#34;blog\u0026#34;] # English page header menu settings [[languages.en.menu.main]] identifier = \u0026#34;blog\u0026#34; name = \u0026#34;Blog\u0026#34; # Header name displayed on the site url = \u0026#34;/blog/\u0026#34; # Site directory weight = 1 # Display order priority # Japanese page settings [languages.ja] weight = 2 languageName = \u0026#34;日本語\u0026#34; contentDir = \u0026#34;content/ja\u0026#34; mainSections = [\u0026#34;blog\u0026#34;] # Japanese page header menu settings [[languages.ja.menu.main]] identifier = \u0026#34;blog\u0026#34; name = \u0026#34;Blog\u0026#34; url = \u0026#34;/blog/\u0026#34; weight = 1 [params] # Display a copy button in code blocks on the page ShowCodeCopyButtons = true author = \u0026#34;Riichi Sugai\u0026#34; # Settings for displaying recent posts on the top page [params.homeInfoParams] ShowRecentPosts = true # Show recent posts RecentPostsCount = 3 # Set number of posts to display to 3 # Validate Top page [outputs] home = [\u0026#34;HTML\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;JSON\u0026#34;] Creating the Top Page Create a top page under content/en/ or content/ja..\nhugo new content/en/_index.md hugo new content/ja/_index.md _index.md functions as the top page and should be prepared for each section.\n※ Note Always use the hugo new command when creating markdown files. Not doing so can cause bugs in the web page preference and display.\nCreating Content As an example of content to create, let\u0026rsquo;s make a directory blog. Create a directory named blog at the same level as the top page, and move into that directory.\nCreate a top page _index.md in /content/en/blog/ hugo new /content/en/blog/_index.md Then create a file with the following content.\n--- date: \u0026#39;2025-11-01T02:14:44+09:00\u0026#39; draft: true title: \u0026#39;Blog\u0026#39; type: \u0026#39;blog\u0026#39; tags: [] categories: [] --- Here, draft: false indicates the page is published and will be displayed on the web. On the other hand, draft: true means it\u0026rsquo;s a draft and won\u0026rsquo;t be displayed.\nCreate content 01-first-post.md in /content/en/blog hugo new /content/en/blog/01-first-post.md And at the beginning of the file, add the following:\n--- date: \u0026#39;2025-11-01T02:14:44+09:00\u0026#39; draft: true title: \u0026#39;Blog\u0026#39; type: \u0026#39;blog\u0026#39; tags: [] categories: [] --- By having the same header as the top page, each piece of content will be displayed in a card format on the top page. The content itself should follow this header. The writing method follows the usual markdown syntax.\nPreviewing the Site To preview the site locally, run the following command in the site\u0026rsquo;s root directory:\nhugo server -D Then, open http://localhost:1313/ in your web browser to view the site. The -D option includes pages marked as draft: true in the output. You can stop the server by pressing Ctrl + C in the terminal.\nPublishing on Github.io To publish the web page, we will use GitHub Pages, a free hosting service provided by GitHub for static sites.\nFirst, create a public GitHub repository named \u0026lt;username\u0026gt;.github.io. From [Settings], set the Default branch to gh-pages (optional). In [Settings] \u0026gt; [Pages], set Source to Deploy from a branch, and specify the branch set in step 2. The web site will be pushed to the gh-pages branch of this repository to publish it in the following steps.\nBuild the Hugo site on GitHub\u0026rsquo;s server (execute the hugo command). cd public git init git remote add origin https://github.com/\u0026lt;username\u0026gt;/\u0026lt;username\u0026gt;.github.io.git git add . git commit -m \u0026quot;Deploy website\u0026quot; git push -f origin gh-pages Open your browser and navigate to https://\u0026lt;username\u0026gt;.github.io/ to see your published site. Automating Deployment with Github Actions To automate the deployment process, we can use GitHub Actions to set up a workflow that automatically builds and deploys the site whenever changes are pushed to the main branch of the source repository.\nBuild the site on GitHub\u0026rsquo;s server (execute the hugo command). Extract the contents of the generated public directory. Push to the gh-pages branch of the public repository (\u0026lt;username\u0026gt;.github.io). Preparation Source code repository: riichisugai/hugo-source\nThis repository contains the source code of the Hugo site. Public repository: riichisugai/riichisugai.github.io\nThis repository is used to publish the generated static site. Personal Access Token (PAT):\nA token with write access (repo scope) to the public repository. This acts as a password for GitHub Actions to push to riichisugai.github.io. GitHub Secret:\nA place to securely store the PAT in the source code repository (hugo-source). This will be registered as GH_PAT. Steps to Create the Workflow Step 1: Create the Workflow File\nNavigate to [Settings] \u0026gt; [Developer settings] \u0026gt; [Personal access tokens] \u0026gt; [Tokens (classic)] in GitHub. Click [Generate new token] Fill in the required fields: Note: Hugo Deploy Token Expiration: Choose as needed Scopes: Select repo Click [Generate token] and copy the generated token. Step 2: Register the Token as a GitHub Secret\nGo to the riichisugai/hugo-source repository. Navigate to [Settings] \u0026gt; [Secrets and variables] \u0026gt; [Actions] \u0026gt; [New repository secret]. Set the name to GH_PAT and paste the copied token into the value field. Click [Add secret]. Step 3: Create the Workflow YAML File\nIn the riichisugai/hugo-source repository, create a directory .github/workflows/ if it doesn\u0026rsquo;t exist. Inside this directory, create a file named deploy.yml with the following content: name: Deploy Hugo site to GitHub Pages on: push: branches: - main # Trigger on pushes to the main branch jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout source code uses: actions/checkout@v4 with: submodules: true # Ensure submodules (themes) are checked out fetch-depth: 0 # Fetch all history for all branches and tags persist-credentials: false - name: Setup Hugo uses: peaceiris/actions-hugo@v3 with: hugo-version: \u0026#39;latest\u0026#39; - name: Generate commit message id: commitmsg run: | # Obtain the list of changed files in the \u0026#39;content\u0026#39; directory CHANGED_FILES=$(git diff --name-only HEAD~1 HEAD content 2\u0026gt;/dev/null) if [ -z \u0026#34;$CHANGED_FILES\u0026#34; ]; then echo \u0026#34;MESSAGE=Deploy site on $(date \u0026#39;+%Y-%m-%d %H:%M:%S\u0026#39;)\u0026#34; \u0026gt;\u0026gt; $GITHUB_ENV else TITLES=$(echo \u0026#34;$CHANGED_FILES\u0026#34; \\ | sed \u0026#39;s|content/||g\u0026#39; \\ | sed \u0026#39;s|/_index.md||g\u0026#39; \\ | sed \u0026#39;s|.md||g\u0026#39; \\ | tr \u0026#39;\\n\u0026#39; \u0026#39;, \u0026#39;) echo \u0026#34;MESSAGE=Update: ${TITLES} ($(date \u0026#39;+%Y-%m-%d %H:%M:%S\u0026#39;))\u0026#34; \u0026gt;\u0026gt; $GITHUB_ENV fi echo \u0026#34;Commit message: $MESSAGE\u0026#34; - name: Build Hugo site run: hugo --cleanDestinationDir --minify - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: personal_token: ${{ secrets.GH_PAT }} external_repository: riichisugai/riichisugai.github.io publish_dir: ./public punlish_branch: gh-pages commit_message: ${{ env.MESSAGE }} user_name: \u0026#39;github-actions[bot]\u0026#39; user_email: \u0026#39;github-actions[bot]@users.noreply.github.com\u0026#39; Checkout source; with: submodules: true must need to be included to properly fetch the theme which is a submodule. Step 4: Execute and Verify the Workflow\nPush the created deploy.yml file to the main branch of the hugo-source repository. Go to the Actions tab of the hugo-source repository to see the workflow execution. If the workflow completes successfully with a green check mark, the auto-deployment is successful. Verify that the site is displayed correctly. That\u0026rsquo;s the procedure for creating a website with Hugo and publishing it using Github Pages. Enjoy building your site!\n","permalink":"https://riichisugai.github.io/en/blog/01-first-post/","summary":"\u003cp\u003eI tried creating my first website using \u003ca href=\"https://gohugo.io/\" target=\"_blank\" rel=\"noopener\"\u003eHUGO\u003c/a\u003e\n.\nHere, I\u0026rsquo;ll leave a record of the steps as a memorandum.\u003c/p\u003e\n\u003ch2 id=\"static-site-generators\"\u003eStatic Site Generators\u003c/h2\u003e\n\u003ctable\u003e\n  \u003cthead\u003e\n      \u003ctr\u003e\n          \u003cth style=\"text-align: left\"\u003eFeature\u003c/th\u003e\n          \u003cth style=\"text-align: center\"\u003ePlain HTML\u003c/th\u003e\n          \u003cth style=\"text-align: center\"\u003eJekyll\u003c/th\u003e\n          \u003cth style=\"text-align: center\"\u003eHugo\u003c/th\u003e\n      \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n      \u003ctr\u003e\n          \u003ctd style=\"text-align: left\"\u003eLanguage Base\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eHTML/CSS/JS\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eRuby\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eGo\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd style=\"text-align: left\"\u003eSetup\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eNone\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eMedium\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eSomewhat Hard\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd style=\"text-align: left\"\u003eGitHub Pages\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003e◎ (Direct)\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003e◎ (Official)\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003e○ (Push after build)\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd style=\"text-align: left\"\u003eBuild Speed\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003e–\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eSlow\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eUltra-fast\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd style=\"text-align: left\"\u003eMultilingual\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eManual\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003ePartially\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003e◎ (Standard)\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd style=\"text-align: left\"\u003eTemplates/Themes\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eManual\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eMany\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eVery Many\u003c/td\u003e\n      \u003c/tr\u003e\n      \u003ctr\u003e\n          \u003ctd style=\"text-align: left\"\u003eBest For\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eSmall/Free\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eMedium/Blog\u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003eMedium-Large/Multi-lang\u003c/td\u003e\n      \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\u003cp\u003eThis time, I decided to use Hugo.\nThe key points for this choice were:\u003c/p\u003e","title":"01: Creating a Website with HUGO"}]