搭建个人博客

搭建我的个人博客

1.搭建本地写作环境

1.1环境配置

使用Hexo必须要安装Node.js和Git。

安装Node.js（windows）

1. 打开Node.js官网。下载地址
2. 打开下载好的安装包，全部默认即可。
3. 运行 > CMD > node --version，查看是否安装成功。

安装git（windows）

1. 下载Git。Windows版下载地址
2. 打开安装包，默认安装。
3. 运行 > CMD > git --version，查看是否安装成功。

1.2创建项目

1.2.1初始化项目

1. 创建并初始化博客项目
$   hexo init myblog

2. 切换到目录中
$   cd myblog

3. 安装依赖
$   npm install

1.2.2本地预览

# 1.生成静态网站
#   将网站网站资源放在public目录下，相当于执行了 hexo generate
$   hexo g

# 目录结构
_config.yml     # 网站配置文件
db.json
node_modules
package-lock.json
package.json    # 应用程序的信息
public          # 静态站点存放于此
scaffolds       # 模板文件夹，在建立新文章时会使用此文件夹下的文件作为模板
source          # 存放用户资源的地方
themes          #  主题
yarn.lock       

# 2.启动服务，本地预览，相当于执行了hexo server
$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器打开http://localhost:4000/就可以看的效果。

1.2.3新建文章

1. 新建一篇名为test的文章

   $   hexo new test
   INFO  Created: D:\Project\blog\myblog\source\_posts\test.md
   

注意：新建文章默认会放到source/_posts/目录下。文件后缀默认为md，新建是只需要指定文件名即可。

2. 查看test.md

    $ cat source/_posts/test.md
    ---
    title: test
    date: 2021-02-20 16:42:26
    tags:
    ---
   

3. 编辑test.md，添加【##我是用来测试的】。

   $ vim source/_posts/test.md
   $ cat source/_posts/test.md
   ---
   title: test
   date: 2021-02-20 16:42:26
   tags:
   ---
   
   ## 我是用来测试的
   
   $ hexo g
   $ hexo s
   

4. 打开http://localhost:400/，查看效果。

2.创建GitHub Pages

2.1在GitHub上创建一个仓库

打开https://github.com/new
在【Repository name】框中输入[username.github.io]
然后单击【Createrepository】创建一个新的仓库。
注意：username是你的GitHub用户名。

2.2吧Hexo生成的静态网站推送到GitHub上

首先，修改_config.yml

deploy:
  type: git
  repo: https://github.com/Soul-DongIT/Soul-DongIT.github.io.git
  branch: master

注意：repo的值要改成你自己的仓库地址。

然后执行部署命令

# 执行部署命令
$ hexo d
INFO  Validating config
ERROR Deployer not found: git

# 如果出现上面的报错，则需要安装一个插件 hexo-deployer-git
$ npm install hexo-deployer-git --save
+ hexo-deployer-git@3.0.0
added 1 package from 1 contributor and audited 195 packages in 5.321s

# 再次部署
$ hexo d
Branch 'master' set up to track remote branch 'master' from 'https://github.com/Soul-DongIT/Soul-DongIT.github.io.git'.
INFO  Deploy done: git

# 如果不成功，执行下列语句
$ git config --global user.name "Soul-DongIT"
$ git config --global user.email "Soul-DongIT@github.com"

至此，Hexo生成的静态网站就被推送到了我们前面在GitHub新建的仓库中。
打开https://soul-dongit.github.io/查看效果。

3.使用NexT主题

NexT主题地址

3.1安装主题

Hexo只需要将主题文件复制到站点目录的themes目录下，然后修改配置文件即可。

# 1.下载代码
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next

# 2.设置_config.yml
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# 查看是否替换成功
$ hexo clean
$ hexo g
$ hexo s

# 推送到Github仓库
$ hexo d

4.新建页面

4.1新增导航栏页面

如果要新增导航栏上的页面，需要在主题配置文件themes/hexo-theme-next/_config.yml中搜索menu，在menu中配置对应的导航栏选项