搭建博客过程

# 博客搭建

本博客是基于vuepress-theme-vdoing搭建的个人博客网站。

# 1、简单看一下项目

├── vuepress-theme-vdoing
│   ├── docs(主要存放自己的博客,config配置文件，index主页)
│   ├── node_modules(npm install时，下载的第三方依赖包)
│   ├── utils(js工具)
│   ├── vdoing(vue)
│   ├── package.json(项目元数据，还有项目依赖的第三方模块)
│── └── package-lock.json(锁定依赖版本)

1
2
3
4
5
6
7

先启动项目：

# clone the project
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git

# enter the project directory
cd vuepress-theme-vdoing

# install dependency
npm install # or yarn install

# develop
npm run dev # or yarn dev

1
2
3
4
5
6
7
8
9
10
11

这里有一个问题是npm>=17后会出现一点问题，要设置额外的参数，大家可以在网上搜一下错误，会有对应的帖子的。或者像我一样，用的16最新的那个版本，就不会有什么问题。

# 2、构建自己的docs

需要注意三个地方：
- 博客文件夹
- config.ts
- index.md

博客文件夹请注意是带编号的，定义了这项规则用于生成侧边栏，自己定义文件夹名称的时候注意命名规则；config.ts 主要研究这个，全文好好研究一下，设置自己的博客风格; index.md 这里面定义主页风格。

这一步需要定义好自己的博客主题风格，以及创建好自己的博客文件夹，md文件正常显示。

# 3、Github Pages

这一步需要先装一下git软件  
还有先在远程仓库创建<username>.github.io仓库

git init # 初始化git项目

git add . # 将更改存到暂存区

git commit -m "初始化博客" 

git remote add origin 上面创建的git仓库地址

git push -u origin master # 推送到远程仓库

1
2
3
4
5
6
7
8
9
10

下面的话就需要修改一下deploy.sh文件，只需要改一下push_addr的value值为自己的远程仓库地址。

开始运行部署文件，运行方式的话，在自己的cmd窗口的话，使用npm run deploy命令；在git bash界面直接./deploy.sh运行部署文件，部署文件会将打包生成的文件推送至远程仓库，分支是 gh-pages；最后在github pages页面选一下branch 和根目录，启动一下项目，访问链接，如果和本地预想效果一样的话，这一步就算成功了。

# 4、域名

如果想要自己的域名的话，是需要去云服务商那买域名的，我这里讲一下我配置阿里云域名的过程。

1. 想一个自己想要的域名，去阿里云域名那看一下，根据需要选择域名，按流程购买，这里的审核差不多需要2-3小时。
2. 域名审核通过之后，按我这个域名举例：r2better.top 域名指向我的 GitHub Pages 网站：
  a、登录域名注册商账户，并找到用于管理 DNS 记录的页面。
  b、添加一条 A 记录，将 @ 主机记录指向 185.199.108.153、185.199.109.153、185.199.110.153 和  185.199.111.153（GitHub Pages 服务器的 IP 地址），我这边都添加上了。
  c、添加一条 CNAME 记录，将 www 主机记录指向您的 GitHub Pages 网站的 URL，例如 <username>.github.io。
3. 最后一步在githubs pages里添加一下自己的Custom domain。

如果按新的域名访问成功的话，那么整个博客构建流程就成功了！