VuePress搭建專屬博客+github部署+個人域名

個人博客在線展示： 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 [e-mail]: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 子倉庫自動爲：