使用 Hugo 跟 Cloudflare 架設個人品牌網站 - changyy.app

買了 changyy.app 網域好一陣子，想說該用來經營一下個人品牌，然後一直偷懶 XD 目前用 Github private repository + Hugo + Cloudflare 維護 https://changyy.app 網站，最近來換一下 Hugo theme ，再重新複習一下。

目前架設個人品牌網站，主要著重在把一些網路足跡紀錄一下，雖說 linkedin 上也是整理足跡的方式，但目的是很正式的求職路線，一些有趣的小品反而不太適合。近三年嘗試了 golang、python 和 node.js 等等外，在工作上的程式語言有盡可能切換到 Python，也試著把一些小品工具包裝成 PyPi 安裝方式作為收尾，預計就可以用來充實個人品牌網站了？！

目前架設個人網站的需求如下：

• 把相關網站靠 link 關聯著
• 提供撰寫簡單的條列式記錄生活

就這樣，先挑了 hugo-PaperMod 樣版來試試。

連續動作：

% hugo version

hugo v0.121.1+extended Darwin/arm64 BuildDate=unknown VendorInfo=macports

% hugo new site MyWebsite --format yaml

Congratulations! Your new Hugo site was created in /path/MyWebsite.

Just a few more steps...

1. Change the current directory to /path/MyWebsite.

2. Create or install a theme:

   - Create a new theme with the command "hugo new theme <THEMENAME>"

   - Install a theme from https://themes.gohugo.io/

3. Edit hugo.yaml, setting the "theme" property to the theme name.

4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".

5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

% cd MyWebsite

% hugo serve

接著套用一下 PaperMod 樣板，稍微從他的教學 github.com/adityatelange/hugo-PaperMod/wiki 小改：

% curl -L https://github.com/adityatelange/hugo-PaperMod/archive/v7.0.zip > /tmp/v7.0.zip

% unzip /tmp/v7.0.zip -d themes/

% mkdir -p config/_default/

% cat config/_default/config.yml 

theme: "hugo-PaperMod-7.0"

% tree -L 2

.

├── archetypes

│   └── default.md

├── assets

├── config

│   └── _default

├── content

├── data

├── hugo.yaml

├── i18n

├── layouts

├── static

└── themes

    └── hugo-PaperMod-7.0

12 directories, 2 files

% hugo serve

 

最後連續動作弄了些：

% cat config/_default/config.yml 

# https://gohugo.io/getting-started/configuration/

baseURL: https://your-domain

languageCode: en-us

title: YourWebsiteName

theme: hugo-PaperMod-7.0

# https://analytics.google.com/analytics/web/?#/xxxxx/reports/intelligenthome

googleAnalytics: G-XXXXXXX

minify:

  disableXML: true

  minifyOutput: true

# https://github.com/adityatelange/hugo-PaperMod/wiki/Installation

params:

  env: production

  # https://github.com/adityatelange/hugo-PaperMod/wiki/Features#profile-mode

  profileMode:

    enabled: true

    imageUrl: https://secure.gravatar.com/avatar/MD5_Of_EmailAddress?size=120

    imageWidth: 120

    imageHeight: 120

    buttons:

      - name: open source

        url: /projects

  socialIcons:

    - name: github

      url: https://github.com/id

    - name: linkedin

      url: https://linkedin.com/in/id

    - name: blogger

      url: https://your-blog-url

    

  assets:

    favicon: https://secure.gravatar.com/avatar/MD5_Of_EmailAddress?size=128

    favicon16x16: https://secure.gravatar.com/avatar/MD5_Of_EmailAddress?size=16

    favicon32x32: https://secure.gravatar.com/avatar/MD5_Of_EmailAddress?size=32

    apple_touch_icon: https://secure.gravatar.com/avatar/MD5_Of_EmailAddress?size=128

    safari_pinned_tab: https://secure.gravatar.com/avatar/MD5_Of_EmailAddress?size=128

% tree -L 2

.

├── archetypes

│   └── default.md

├── assets

├── config

│   └── _default

├── content

│   └── projects

├── data

├── hugo.yaml

├── i18n

├── layouts

├── static

└── themes

    └── hugo-PaperMod-7.0

13 directories, 2 files

下一刻則是 Cloudflare 那邊設定 Workers & Pages 項目，就長出了 changyy.app 啦，希望 2024年還有餘力繼續擴充足跡。