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 git@github.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 git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:zuxian/myBlog.git master:gh-pages

cd -

购买专属域名并设置

阿里云购买域名 https://mi.aliyun.com/

随便买的域名 80nd.cn

我还注册了一个自己名字的域名，暂时不用…

设置域名解析， 其中ip 设为 用户名.github.io 的ip

github上— zuxian.github.io 设置个人域名 — settings

接下来 myBlog 子仓库自动为：