想要快速搭建自己的个人博客,记录自己的工作学习心得,争取当一条有梦想的咸鱼

搭建前提:Node.js >= 8.6,其他环境请看上一篇 (opens new window)

# 初始项目

# 创建并进入一个新目录
mkdir blog && cd blog
# 使用包管理器进行初始化
npm init
# 安装 VuePress
npm install -D vuepress
1
2
3
4
5
6
7
8

# 在 package.json 中添加 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
1
2
3
4
5
6

# 目录结构

Vuepress 官方给出的目录结构 (opens new window)更加完整,这里就贴一下我的目录参考一下吧

blog
├── docs
│   ├── .vuepress
│   │   ├── public # 存放静态资源
│   │   │   └── favicon.ico 
│   │   ├── styles # 存放样式
│   │   │   ├── index.styl # 全局样式文件
│   │   │   └── palette.styl # 重写默认颜色常量
│   │   └── config.js # 配置文件
│   │ 
│   ├── _posts # 博客文件夹
│   │   └── xxx.md
│   └── about # 新建关于页面
│       └── index.md
├── deploy.sh # 部署
└── package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 基本配置

博客到这里 基本就算完成了接下来就是部署到 GitHub Pages 上了

# 部署到 GitHub Pages

  1. 在 Github 新建一个仓库

    仓库的名字是:username.github.io 其中 username 换成你自己的用户名

  2. 新建 deploy.sh 文件

    # 确保脚本抛出遇到的错误
    set -e
    # 生成静态文件
    npm run docs:build
    # 进入生成的文件夹
    cd docs/.vuepress/dist
    # 如果是发布到自定义域名
    # 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:<USERNAME>/<REPO>.git master:gh-pages
    cd -
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

    把发布到的 GitHub 仓库用户名修改成你自己的

  3. 配置 git 公钥连接到仓库

    • 首先配置本地用户名及邮箱

      # 配置用户名
      git config --global user.name "用户名"
      # 配置邮箱
      git config --global user.email "邮箱地址"
      
      1
      2
      3
      4
      5

      以上命令执行结束后,可用 git config --global --list 命令查看配置是否成功

    • git 生成公钥

      ssh-keygen -t rsa -C '邮箱地址'
      
      1

      提示设置存放公钥的位置和密码,全部默认的话直接按回车

    • 查看公钥

      cat ~/.ssh/id_rsa.pub
      
      1
    • 在 GitHub 上配置 SSH Key

      细心的同学会发现 GitHub 上有两个地方都可以配置 SSH Key

      第一种是在个人设置里全局 (opens new window)的 Key

      这个全局 Key 设置之后你以后再用 git 提交到其他仓库时就不会提示你 id_rsa.pub error 了

      然后再说第二种 在仓库的设置中配置 仅用于此仓库的读和写 具体路径如下

      ​ 需要注意的是复制的时候把前边的 ssh-rsa 也要复制上 并勾选下边的写入选项

  4. 运行 deploy.sh 文件

    运行后会自动在 docs/.vuepress/dist 目录下生成网页文件 并上传到 GitHub 可能会有几分钟延迟

    部署成功后就可以访问 username.github.io 查看啦!