VuePress搭建專屬部落格+github部署+個人域名

個人部落格線上展示： https://fuzuxian.fun/myBlog/

個人部落格線上展示： https://80nd.cn/myBlog/

舊的去除 https://zuxian.github.io/myBlog/

vuepress官網：https://www.vuepress.cn/

用VuePress搭建基礎部落格參考以下博文

參考1111

參考2222

詳細參考3333

使用vuepress-theme-reco主題搭建

vuepress-theme-reco主題

npx

npx @vuepress-reco/theme-cli init my-blog
           

npm

# init
npm install @vuepress-reco/theme-cli -g
theme-cli init my-blog

# install
cd my-blog
npm install

# run
npm run dev

# build
npm run build
           

• package.json 檔案

{
  "name": "cookie-fzx",
  "version": "1.0.0",
  "author": "cookie",
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^1.3.1",
    "vuepress-theme-reco": "1.3.2"
  },
  "description": "stay hungry, stay foolish"
}
           

自動部署到github上并展示

• 建立主倉庫 ----

  zuxian.github.io

echo "# zuxian.github.io" >> README.md

git init
git add README.md

git commit -m "first commit"

git remote add origin [email protected].com:zuxian/zuxian.github.io.git

git push -u origin master
           

• 建立子倉庫-----分支

  myBlog

注意 ： config.js 中需要設定

base:'/myBlog/',

• • 建立shell腳本，

    deploy.sh

npm run build

而不是

docs：build

生成的檔案夾（沒有dist檔案！！）：

cd public

#!/usr/bin/env sh

# 確定腳本抛出遇到的錯誤
set -e

# 生成靜态檔案
npm run build

# 進入生成的檔案夾
cd public

# 如果是釋出到自定義域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果釋出到 https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
# 如果釋出到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:zuxian/myBlog.git master:gh-pages

cd -
           

購買專屬域名并設定

阿裡雲購買域名 https://mi.aliyun.com/

随便買的域名

80nd.cn

我還注冊了一個自己名字的域名，暫時不用…

設定域名解析， 其中ip 設為

使用者名.github.io

的ip

github上—

zuxian.github.io

設定個人域名 — settings

接下來

myBlog

子倉庫自動為：