[开发工具] 利用GitPage+VuePress搭建个人博客

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发工具 -> 利用GitPage+VuePress搭建个人博客 -> 正文阅读

[开发工具]利用GitPage+VuePress搭建个人博客

工具：github、VScode、

简述一下过程：

1、新建一个username.github.io项目，github.io相当于是github提供了一个服务器

2、新建一个博客项目docs，并且自动化部署到username.github.io项目中

3、利用VuePress来构建博客docs

4、利用github.io提供的https路径就可以打开你编写的文档

下面动手开始吧

1、在github上创建一个名为username.github.io的项目，选择Public公开，然后保存

在项目xxxx.github.io项目中设置Pages,找到Settings--点击左侧的Pages,Source选择的就是docs项目部署的地址，比如把docs项目build打包后到dist部署到xxxx.github.io项目中的master并且覆盖，这里就配置master/root，因为xxxx.github.io项目默认会打开目录中的index.html。（dist文件打包后会生成index.html）然后打开Your site is published at后面的地址就可以访问

2、拉取代码git clone git@github.com:xxxx/username.github.io.git，新建index.html文件，

浏览器打开?https://xxxxx.github.io/username.github.io/就可以,默认打开根目录下的index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  This is my personal blog
</body>

</html>

上面我们是通过本地push的方式直接把静态页面推送到username.github.io仓库，其实本质上来说，这个仓库不用更改。下面我们来看一下如何自动化部署你的代码。

自动化部署：通过配置deploy.s

创建docs项目来写博客内容，自动把docs推送到username.github.io仓库,这样每次在docs项目中写内容，就可以用https://xxxxx.github.io/username.github.io/打开看到新的内容

1、在github上新建项目docs

2、在docs项目中配自动化部署脚本，创建文件：deploy.sh

注意：在dist文件中新建仓库，执行git push -f 报错的话，可以用git remote -v 查询一下库

# 关联远程仓库 git remote add origin https://github.com/songzi0321/songzi.github.io.git


#!/usr/bin/env sh
 
# 确保脚本抛出遇到的错误
set -e
 
# 生成静态文件
npm run docs:build
 
# 进入生成的文件夹
cd docs/.vuepress/dist
 
git init
git add -A
git commit -m 'deploy'

# 关联远程仓库
git remote add origin https://github.com/songzi0321/songzi.github.io.git

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

 
# 如果发布到 https://<USERNAME>.github.io/<REPO>,ssh的话需要加密钥
git push -f git@github.com:xxxx/username.github.io.git master
 
cd -

在 package.json中配置scripts

//package.json
{
  "name": "docs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },
  "dependencies": {
    "vuepress": "^1.8.2"
  }
}

执行 npm run deploy就是自动部署了

自动化部署原理：?当运行npm run deploy的时候，本地项目文件会打包到dist目录下（默认会打开dist文件中的index.html），进入dist目录，初始化git仓库，commit，push到远程并覆盖仓库中的master分支。

以上执行完成以后就相当于把docs项目部署到username.github.io仓库里面了，只不过是自动部署

在docs项目中利用??????VuePress来构建博客内容

效果预览：@melody-core/melody-cli | 音巢

开源：melody-core-docs/docs at master · melody-core/melody-core-docs · GitHub

把docs项目从github中git clone 下来

前提 VuePress 需要 Node.js (opens new window)>= 8.6

node -v 检查版本

升降node版本：

sudo npm install -g n

sudo n 10.20.1 ? //安装版本10.20.1

sudo n 14.18.2   //安装版本14.18.2

1、git clone?https://github.com/xxxx/docs.git

2、安装vuepress

yarn add -D vuepress # npm install -D vuepress

3、创建你的第一篇文档，在docs项目中创建名为docs文件夹，在docs中创建README.md

mkdir docs && echo '# Hello VuePress' > docs/README.md

4、在?package.json?中添加 scripts

{
  "name": "docs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },
  "dependencies": {
    "vuepress": "^1.8.2"
  }
}

5、启动项目，先安装vuepress包，在执行npm run docs:dev启动项目，会在本地打开一个http://localhost:8080

yarn docs:dev # npm run docs:dev

6、想要用https://xxxxx.github.io/username.github.io/打开在项目docs到项目，就执行

npm run?deploy 自动部署，或手动按顺序执行deploy中的命令

目录结构：

docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
docs/.vuepress/theme: 用于存放本地主题。
docs/.vuepress/styles: 用于存放样式相关的文件。
docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
docs/.vuepress/public: 静态资源目录。
docs/.vuepress/templates: 存储 HTML 模板文件。
docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客户端应用的增强

注意：部署的时候其实是把docs打包后的dist部署到username.github.io的master分支，在username.github.io项目的Setting的Pages中配置(Source) master/root

如果部署完了发现打开页面是404，请查看config.js中的base是用的相对还是绝对路径改成./

小技巧：

(1) 在mac上打开隐藏文件：command+shift+句号

(2) 部署不上去的时候看看是否需要配置密钥：

配置密钥方法：

ssh加密
Mac
(1) cat ~/.ssh/id_rsa.pub  //查询现有秘钥
(2) ssh-keygen -t rsa -C "your.email@example.com" -b 4096  //如果没有秘钥就生成新秘钥，如果有秘钥就跳过此步骤直接执行步骤3输入电脑开机密码
(3) pbcopy < ~/.ssh/id_rsa.pub   //复制秘钥
(4) 打开github设置--》SSH Keys  把秘钥粘贴到key,title会自动生成。创建即可

参考：
Vuepress | 使用vuepress搭建GitHub Pages - 掘金
 Vuepress | 快速上手指南 - 掘金

未完。。。