Blog of Eddy

# 使用 VuePress 搭建本博客

# 背景

闲来无事，想写写博客，记录一下自己的经历，分享和记录一下自己解决问题的经验。但是一些通用网站的界面有点丑，而且没有个人主页，所以就想自己弄一个。

使用VuePress搭建，内置markdown，非常好用。目前纯前台，以后有时间会考虑做个后台的，不过个人认为写个博客没必要。

# 环境

npm > 10
#安装vuepress
npm install -g vuepress
1
2
3

# 目录结构

目前我就是随便写写，一切从简，所以目录结构是这样的，可以参考我的Github。

*.github.io
    .vuepress
        components
        public
            img
        config.js
    about
    blog
        diary
        java
        linux
        python
    README.md
1
2
3
4
5
6
7
8
9
10
11
12
13

# 流程

  1. 使用npm安装vuepress
  2. 创建README.md文件，并写入内容。
  3. 创建目录结构。
  4. 运行vuepress dev预览效果。
  5. 仔细查看全局配置和主题配置，并对应进行修改。
  6. 运行vuepress build创建静态文件。
  7. 将dist文件夹上传到Github page。

# 注意事项

因为官方文档写得已经很详细了，所以我这里就指出一些注意事项（坑）吧。

  1. 先说明一下，Windows是可以使用bash的，现在Windows 10 内置 Ubuntu，感兴趣的可以去弄一下，就可以执行shell脚本了。
  2. 静态文件都是放在.vuepress文件夹下面的public文件夹下的，直接使用相对路径引用静态资源文件即可，如图片、音乐、视频等。
  3. 一定要仔细查看VuePress的全局配置，如果你使用默认主题，请仔细查看默认主题配置。
  4. 默认主题的主页标题和描述，就是图片下面的那两行文字，是在.vuepress文件夹下面的config.js中配置title和description来改变的。

# package.json

{
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build",
    "deploy": "bash deploy.sh"
  },
  "name": "blooddark.github.io",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "@vuepress/plugin-blog": "^1.0.0-alpha.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# deploy.sh

#!/usr/bin/env bash

# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
vuepress build
# 进入生成的文件夹
cd .vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

← 第一篇博客 →