基于VuePress+GitHub Pages搭建个人博客及部署

一、构建项目

1.构建基本项目结构

1.新建一个名为
blog-demo
的文件夹，命令行进入到该文件夹目录，输入命令：
# 按默认配置初始化一个项目，此时会在当前目录下生成 package.json 文件
npm init -y
2.将
VuePress
作为一个本地依赖安装
npm install -D vuepress
3.在
package.json
里的
scripts
中添加如下代码，不需要修改其它代码
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
4.在项目根目录下，新建
docs
文件夹
mkdir docs
5.新建一个
markdown
文件
echo '# Hello VuePress!' > docs/README.md
6.输入命令启动项目，在浏览器中访问
http://localhost:8080/
即可预览效果
npm run docs:dev
7.docs
目录下新建
.vuepress
文件夹，执行命令如下：
# 新建 .vuepress 文件夹
mkdir docs\.vuepress
8.接着在
.vuepress
文件夹下新建
config.js
文件,这里的
config.js
便是一个
Vuepress
网站必要的配置文件，在其中添加如下代码：
module.exports = {
  base: '/blog-demo/',
  title: 'blog-demo',
  description: 'Vuepress blog demo'
}
其中配置项的含义为：

base：站点的基础路径，它的值应当总是以斜杠开始，并以斜杠结束。这里设置为 /blog-demo/ ，我们再次在本地运行项目，访问路径就需要变更为 http://localhost:8080/blog-demo/

title：网站的标题

description：网站的描述

2.默认主题配置

Vuepress 提供了一个默认主题，让我们不必自己去从零实现复杂的 markdown 文件渲染、目录结构等，直接按照规则去使用它即可。如果你想自定义自己的主题，请查看官方文档：Vuepress-开发主题。

首页

默认主题提供了一个首页的布局，想要使用它，需要在你的根级 README.md 以格式 YAML front matter 指定 home: true。因此，将我们最初创建的 README.md 修改一下：
---
home: true
heroImage: /vue-logo.png
heroText: blog-demo
tagline: 博客示例
actionText: 快速上手 →
actionLink: /
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
---
heroImage: 首页图片，图片放置在 .vupress/public 文件夹下，若没有该文件夹则自己创建一个，保存一张你想要的首页图片，并在此处引用。

其它参数请参考官方文档：Vuepress-默认主题首页

导航栏

导航栏可能包含你的页面标题、搜索框、导航栏链接、多语言切换、仓库链接，它们均取决于你的配置。在 .vupress/config.js 文件添加一些导航栏链接：
module.exports = {
	themeConfig: {
	  	// 你的GitHub仓库，请正确填写
	    repo: 'https://github.com/xxxxxxx/blog-demo',
	    // 自定义仓库链接文字。
	    repoLabel: 'My GitHub',
	  	nav: [
	  		{ text: 'Home', link: '/' },
	  		{ text: 'FirstBlog', link: '/blog/FirstBlog.md' }
	  	]
	}
}
接着，我们在
docs
目录下新建
blog
文件夹，在
blog
目录下创建
/blog/FirstBlog.md
作为我们第一篇博客的内容：
# 我的第一篇博客

My First Blog
我们再在项目根目录，即
blog-demo
下，输入命令
npm run docs:dev
，浏览器中访问
http://localhost:8080/blog-demo/
查看页面效果，点击页面右上角的
FirstBlog
可以看到我们第一篇博客.

侧边栏

最后我们配置侧边栏，让用户体验更好一些，在
.vupress/config.js
文件添加一些代码：
module.exports = {
  themeConfig: {
    sidebar: [
      ['/', '首页'],
      ['/blog/FirstBlog.md', '我的第一篇博客']
    ]
  }
}
至此我们已经完成了一个最简单的博客

二、部署

1.配置和使用 GitHub

本地 git 项目与远程的 GitHub 建立联系 ===》用 SSH keys

检查 SSH keys的设置

首先检查现有的 ssh key：
$ cd ~/.ssh 检查本机的ssh密钥
如果提示：No such file or directory 说明你是第一次使用 git。

生成新的 SSH Key：
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>
输入密码：
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase  again:<再次输入加密串>
以下界面，则成功设置ssh key：

2.添加 SSH Key 到 GitHub

在本机设置 SSH Key 之后，需要添加到 GitHub上，以完成 SSH 链接的设置。

1、打开本地 id_rsa.pub 文件，里面是刚才生成的秘钥。

2、登陆 GitHub 系统。点击右上角的 Account Settings—>SSH Public keys —> add another public keys

3、把你本地生成的密钥复制到里面，点击Add SSH key

测试

输入下面的命令，看看设置是否成功，

git@GitHub.com

的部分不要修改：
$ ssh -T git@GitHub.com
看到以下内容说明以上操作没毛病：

3.项目配置及部署

1、首先确定你的项目是否满足以下条件：
文档放置在项目的 docs 目录中

使用的是默认的构建输出位置

VuePress 以本地依赖的形式被安装到你的项目中，在根目录的
package.json
文件中有如下两段代码：
// 配置npm scripts
"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
 }

// VuePress 以本地依赖的形式被安装
"devDependencies": {
    "vuepress": "^0.14.8"
}
2、在github上创建一个名为 blog-demo 的仓库，并将你的代码提交到github上。如果你对git不熟悉，请先阅读：Git教程-廖雪峰的官方网站

3、在 docs/.vuepress/config.js 文件中设置正确的 base。

如果打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 /<REPO>/，此处我设置为 /blog-demo/ 。

4、在项目根目录中，创建一个如下的 deploy.sh 脚本文件，请自行修改github仓库地址
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

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

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
5、npm run deploy 运行脚本，会自动在我们的 GitHub 仓库中，创建一个名为 gh-pages 的分支，而我们要部署到 GitHub Pages 的正是这个分支。

6、这是最后一步了，在 GitHub 项目点击 Setting 按钮，找到 GitHub Pages – Source，选择 gh-pages 分支，点击 Save 按钮后，静静地等待它部署完成即可。

部署效果预览：https://keepview.github.io/blog.io/

本文基本所有知识点都是各大神的无私分享：

https://blog.csdn.net/olewa_HHH/article/details/86618008

https://www.zhihu.com/question/20463581/answer/25478916

Valine：一款基于Leancloud的无后端评论系统

当然，不用vuePress搭建也没问题。同时可以

将独立域名与 GitHub Pages 的空间绑定，这样访问自己的域名就可以跳转到gitHub Pages托管的你的静态页面了。域名购买和绑定都

参考第一个链接。

本文为使用vue带来的便利所以使用VuePress能够更快搭建较为复杂的页面，这个可以自己权衡。

原文链接：https://blog.csdn.net/kezanxie3494/article/details/105816481