Github Pages 建立个人博客网站

说明

博客模板是 vuepress框架 + vuepress-theme-reco 主题

博客模板使用前面个人修改过的 vuepress-template

模板网页地址 https://github.com/xiaocking/vuepress-template

模板仓库地址 https://github.com/xiaocking/vuepress-template.git

本次需使用包管理 yarn 本次需使用 GitHub ssh 本次执行在 git bash 中（及bash环境）

Github创建仓库

1. 在 Github 上创建2个仓库

2. 第一个仓库

     创建第一个 github 仓库
     仓库名为 <name>.github.io  <name>是你GitHub的登录账号(username)
     本次创建的仓库名为 xiaocking.github.io
     这个仓库负责显示网站内容，我们不需要改动它
   

3. 第二个仓库

     创建第二个仓库 仓库名随意
     本次创建的仓库名为 xiaoc-blog
     日常开发和新增内容主要在这个仓库
   

初始化

1. 选择一个存放项目的位置 下载项目模板 模板地址如上

2. 下载完成后初始化git

   git init`

3. 绑定github仓库(绑定第二个仓库)

   git remote add origin git@github.com:xiaocking/xiaoc-blog.git 这里使用绑定 ssh地址 （如果没有绑定过ssh的 参考网上文章）

4. 安装依赖

   npm install

5. 本地运行

   npm run dev

项目配置

1. 在 package.json中添加

    "scripts": {
      "dev": "vuepress dev docs",
      "build": "vuepress build docs",
      "deploy": "bash deploy.sh" //添加执行脚本命令
    },
   

2. 项目根目录下创建 deploy.sh 脚本文件

   #!/bin/bash
   
   # 确保脚本抛出遇到的错误
   set -e
   
   # 生成静态文件
   yarn build
   
   # 进入生成的文件夹
   cd docs/.vuepress/dist
   
   # 如果是发布到自定义域名
   # echo 'www.yourwebsite.com' > CNAME
   
   # 获取当前时间
   time=$(date "+%Y-%m-%d %H:%M:%S")
   
   git init
   git add -A
   git commit -m "deploy $time"
   
   # 如果你想要部署到 https://USERNAME.github.io
   # 这里地址使用第一个仓库的 ssh地址
   git push -f git@github.com:xiaocking/xiaocking.github.io.git master
   
   
   # 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
   # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages
   
   cd -
   

3. 提交代码

   git add . git commit -m"init" git push -u origin master

构建

1. 执行

   yarn deploy

2. 没有报错的话 打包后的文件就会上传到第一个仓库里面
3. 等待一会儿，打开https://<name>.github.io就能看到博客页了

本人博客 (opens new window)