利用GitPage+VuePress搭建个人博客

知命者夏洛特

已于 2022-03-10 15:56:29 修改

阅读量535

点赞数

分类专栏：前端 vue 文章标签： github git

于 2022-03-07 18:19:01 首次发布

本文链接：https://blog.csdn.net/weixin_41815063/article/details/123336056

版权

vue 同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

前端

21 篇文章 0 订阅

订阅专栏

工具：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 | 快速上手指南 - 掘金

未完。。。

知命者夏洛特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用GitPage+VuePress搭建个人博客

工具：github、VScode第一步：在github上创建一个名为username.github.io的项目，选择Public公开，然后保存，进入到这个项目中，找到Settings--点击左侧的Pages，设置分支资源Source，然后打开Your site is published at后面的地址第二步：拉取代码git clone [email protected]:xxxx/username.github.io.git，新建index.html文件，git add ....
复制链接

扫一扫