Loading
othsueh
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
Challenger Surviving Islands: E級玩家
othsueh
... more
1-2
將你的成長軌跡可視化
1-3
1-4
1-5
2-1
2-2
message
2-3
2-4
2-5
CLI (文字介面)
GUI (圖形化介面)
2-6
2-7
2-8
2-9
確認 commit 是否成功
2-10
取消勾選
Hugo 是一款基於 Go (程式語言) 的靜態網頁產生器
(Static Site Generator), 你可以挑選你想要的主題,並輕鬆的設定部落格、寫文章
3-1
3-2
3-3
接下來會更進入 Hugo 的頁面設置,而設置頁面的檔案,叫做 toml
檔
甚麼是 toml
檔
3-4
3-5
cd .. #回到上一層資料夾
hugo new site [建立的資料夾名稱] --force #產生新的網頁
cd [建立的資料夾名稱] #回到原本資料夾
3-6
開啟 Cli
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
#將遠端主題資料夾加入 themes 資料夾中
git submodule update --remote
#更新主題
config.toml
加入下列指令theme = "PaperMod"
3-7
hugo new posts/my-first-post.md
#產生一篇新文章,並存在 content/posts 裡
---
title: "My First Post"
date: no change <!-- 不須更動 -->
draft: false <!-- 將草稿設置為否 -->
---
# Hello World!
3-8
hugo server
#開啟本地端伺服器
3-9
Markdown
HTML
4-1
4-2
4-3
5-1
baseurl = "https://[yourgithubname].github.io"
#設定主頁 url
languageCode = "zh-tw"
#設定 Blog 語言
title = "Whatever you want"
#設定網站標題
buildDrafts = false
#是否產生草稿(建議選否)
5-2
[[menu.main]]
identifier = "tags"
name = "tags"
url = "/tags/"
weight = 10
5-3
[[menu.main]]
identifier = "categories"
name = "Categories"
url = "/categories/"
weight = 20
5-4
[[menu.main]]
identifier = "archives"
name = "Archives"
url = "/archives/"
weight = 30
content/
新增 archives.md
並打上以下內容---
title: "Archives"
layout: "archives"
url: "/archives/"
summary: archives
---
5-5
title: "mySecondPost"
date: date
draft: false
tags: ["code","test"]
categories: ["Markdown"]
5-6
接下來會教大家如何新增一個 profile page
[params.profileMode]
enabled = true
title = "Enter the Content"
subtitle = "Enter the Content"
imageUrl = "img/name.jpg"
imageWidth = 120
imageHeight = 120
imageTitle = "Enter the content"
static/
裡面新增一個 img/
資料夾,並在裡面新增照片檔5-7
[[params.profileMode.buttons]]
name = "Blog"
url = "/posts/"
[[params.profileMode.buttons]]
name = "Categories"
url = "/categories/"
5-8
[[params.socialIcons]]
name = "github"
url = "your github profile url"
#...more
5-9
[params]
ShowBreadCrumbs = true
#展示文章所在目錄
ShowReadingTime = true
#展示閱讀時間
ShowShareButtons = true
#展示分享按鈕
ShowPostNavLinks = true
#本地其他文章連結
[params.cover]
linkFullImages = true
#點擊圖片後以全螢幕檢視
5-10
5-11
GitHub Actions 是 GitHub 提供的程式流程自動化服務
提供的功能(做部落格)
而要使用 GitHub Actions,就必須建立一個流程檔給它執行
6-1
6-2
on:
push:
branches: ["main"]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Install Hugo CLI
run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: Install Dart Sass Embedded
run: sudo snap install dart-sass-embedded
6-3
6-4
6-5
7-1
7-2