免費的博客空間，漂亮的VuePress

1. 配置GitHub Pages

GitHub新建一個repository，

填寫repository的名字，命名規則如下：

• 采用“用戶名.github.io"作為名稱， 這樣生成的網站地址為”https://用戶名.github.io",，
• 如果用其他名稱，例如本例的"gitpages", 最終對應的網址為“https://flylolo.github.io/gitpages/”，

設定為Public，選擇添加一個README.md檔案，
因為是vue專案，.gitignore 檔案選擇Node，

點擊Create按鈕開始創建，
創建成功后，頁面如下圖，點擊Settings進行設定

點擊Save按鈕，會看到頁面出現如下提示

點擊該鏈接，可以看到能正常訪問，

顯示的內容即README.md的內容，
如此就配置成功了，可以自己制作靜態網站簽入到這個repository即可，

2. 配置VuePress

一直比較喜歡vue的官方檔案的樣式，也提供了開源的VuePress，地址為https://vuepress.vuejs.org/zh/，
也是類似風格的檔案樣式，

根據指南選單里的說明，創建一個以VuePress為框架模板的網站，

VuePress 需要 Node.js >= 8.6

2.1 創建并進入一個新目錄

mkdir vuepress-starter && cd vuepress-starter

2.2 使用包管理器進行初始化

yarn init # npm init

2.3 將 VuePress 安裝為本地依賴

yarn add -D vuepress # npm install -D vuepress

2.4 創建第一篇檔案

mkdir docs && echo '# Hello VuePress' > docs/README.md

2.5 在 package.json 中添加一些 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

2.6 在本地啟動服務器

yarn docs:dev # npm run docs:dev

VuePress 會在 http://localhost:8080 啟動一個熱多載的開發服務器，

這肯定不是我們想要的漂亮頁面，我們再設定一下，

2.7 設定主題

默認的主題提供了一個首頁（Homepage）的布局 (用于 這個網站的主頁)，想要使用它，需要在你的根級 README.md 的 YAML front matter 指定 home: true，以下是一個如何使用的例子：

---
home: true
heroImage: /hero.png
heroText: Hero 標題
tagline: Hero 副標題
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 簡潔至上
  details: 以 Markdown 為中心的專案結構，以最少的配置幫助你專注于寫作，
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題，
- title: 高性能
  details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作為 SPA 運行，
footer: MIT Licensed | Copyright ? 2018-present Evan You
---

設定完后，可以看到出現了我們想要的頁面，

其他設定可參考其他幫助頁面：https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E9%A6%96%E9%A1%B5

3. 發布到GitHub Pages

下一步就是將生成的網頁發布到GitHub，直觀的想法就是把專案build后的檔案push到上文創建的Repository，實際上的做法卻可以更“巧妙”一些，

• 將源檔案提交到main分支，
• 通過GitHub的Actions，在上一步完成之后，自動build，并將結果提交到另一個分支（gh-pages），
• GitHub Pages指向gh-pages分支，

3.1 創建gh-pages分支

如下圖，在下拉選單中輸入gh-pages，并點擊下面的Create branch提示，會創建gh-pages分支，

3.2 將GitHub Pages指向gh-pages分支

如下圖方式修改：

3.3 設定自動發布的Token

因為需要自動發布，設定用于發布的Token，
首先創建Token，依照下圖逐步創建即可，
點擊右上角的頭像，選擇Setting：

在打開的頁面中點擊Developer setting

選擇Personal access tokens， 點擊Generate token按鈕創建一個新的Token

如下圖設定，只是用于發布，只給repo權限即可

生成token之后，記得拷貝

設定token，在gitpages庫的設定中，選擇secrets，點擊new repository secret按鈕，

在新打開的頁面中設定創建的Token，名稱設為ACCESS_TOKEN，

4.設定Actions，自動部署

在gitpages，選擇Action選單，點擊set up a workflow yourself鏈接，

默認創建了一個main.yml檔案，如下圖

name: Deploy GitHub Pages

# 觸發條件：在 push 到 master 分支后
on:
  push:
    branches:
      - master

# 任務
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master
        with:
          persist-credentials: false

      # - name: Build
      #  run: npm install && npm run build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: public
          BUILD_SCRIPT: npm install && npm run build # The build script the action should run prior to deploying.

5. 發布

首先clone設定好的repository

git clone https://github.com/FlyLolo/gitpages.git

將上文創建好的VuePress檔案拷貝到clone的gitpages檔案夾

git add .
git commit -m "first"
git push

將檔案push到repository，
此時在Action選單中可以看到發布的進度

點擊箭頭所示記錄，在新頁面中可以看到具體的發布進度，

如果發現發布失敗，可以在此處查看錯誤資訊，

6.一個錯誤

此時訪問發布好的頁面，可能會有以下錯誤，樣式沒有正常加載，

當發布到子目錄會出現如下問題，在gitpages\docs.vuepress目錄下創建config.js，并進行如下設定即可，

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  base:'/gitpages/'
}