如何搭建一个博客网站

一、前置准备

1、安装NPM包管理工具

NPM 全称 Node Package Manager，它是 JavaScript 的包管理工具, 并且是 Node.js平台的默认包管理工具。新版的Node.js已经集成了NPM工具，所以我们只需要下载Node.js就好。

1）通过Node.js官网下载安装

进入官网后，我们可以看到两个版本的安装包，推荐下载LTS长期支持版本。下载完成后打开pkg文件，一路同意即可。

2）通过Homebrew安装（Mac用户可以使用）

1	COPYbrew install node

等待一段时间后，Node.js就安装完毕了，如果下载速度较慢可以考虑进行换源。

安装完成后，可以通过 node -v 查看Node.js的版本，或用 npm -v 查看NPM工具的版本。

2、安装Hexo工具

Hexo 是一个快速、简洁且高效的博客框架。Hexo 能够使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装Hexo和Hex服务器模块

1 2	COPYnpm install -g hexo-cli npm install hexo-server --save

3、准备博客主题

网上有大量的Hexo主题相关的帖子，你也可以在Hexo官方的主题社区，可以凭自己的爱好选择合适的主题。我选择的是Volantis ，是一个功能丰富、高度模块化的 Hexo 博客主题。接下来的内容也都将围绕这个主题展开。

二、本地部署

1、安装主题

1）、初始化博客

在你想要创建博客的文件目录下进入终端，运行以下命令，会生成一个Blog文件夹，里面是博客的基本配置。

1	COPYhexo init Blog

2）、安装主题

a）常规流程

当你创建好了初始化博客之后，博客会是Hexo的默认主题，接下来替换为你预先选好的主题即可。打开Blog文件夹下的_config.yml文件，找到theme: landscape这一项，然后将其替换为以下内容后保存退出。

1	COPYtheme: volantis

然后打开终端运行以下命令

1	COPYnpm i hexo-theme-volantis

b) 快捷命令（Mac用户可以使用）

1	COPYcurl -s https://volantis.js.org/start \| bash

这行命令将会自动检测并安装所需环境，初始化博客，然后下载安装并应用主题。

3）检验是否成功

在本地运行部署博客，观察是否可以访问。

1 2	COPYhexo g #生成网页 hexo s #本地运行Hexo服务

运行结束后，切勿关闭终端。访问 http://localhost:4000/ 观察主题是否被成功应用，如果未成功，请检查上面的步骤是否有缺失，或者在评论区留言，或者通过邮箱联系我。

2、创建博文

1）创建新博文

执行以下命令

1	COPYhexo n post [文章标题]

会自动在source/_post文件夹下生成一个对应的md文件（如果想要修改默认生成的文章格式，可以修改scaffolds/post.md文件）。

2）发布网页

1 2	COPYhexo g #生成网页 hexo s #本地运行Hexo服务

运行成功后。访问 http://localhost:4000/ ，新写的md文件会自动生成博客文章显示在主页。

三、部署至Github Page

1、安装Git

安装版本管理工具Git，用于将代码上传到Github仓库中。

2、新建仓库

在GitHub中新建一个名为 [用户名].github.io 的公开仓库。

3、绑定Git与Github

1）打开Git bash，执行如下命令

1 2	COPYgit config --global user.name "这里换上你的用户名" git config --global user.email "这里换上你的邮箱"

2）执行以下命令生成密钥

1	COPYssh-keygen -t rsa -C "这里换上你的邮箱"

进行3次或4次确认后，到C盘用户目录下找到.ssh文件夹，有一个命名为 id_rsa.pub 的文件，用文本编辑器打开后复制下来。

3）配置GitHub Settins

打开Github，进入Settings配置界面，选择SSh and GPG keys项，创建 New SSH key，将刚才复制的内容粘贴到key输入框中，Title随便起一个容易分辨的名字就可以了。

4、修改_config.yml文件

修改博客文件夹下，名为_config.yml的文件，如果没有该文件，则可以自行创建。

找到deploy模块，对其进行如下修改

COPYdeploy:
  type: git
  repo: git@github.com:[用户名]/[仓库名]
  branch: main # 分支的名字，可根据实际情况进行修改

5、上传网页文件到Github仓库中

下载上传过程中所需要的插件hexo-deployer-git

1	COPYnpm install hexo-deployer-git --save

运行如下命令，将网页上传到仓库中：

1 2	COPYhexo g # 生成网页 hexo d # 将网页文件上传到仓库中

到这里，整个流程就结束了，如果整个过程都没有问题的话，我们就可以通过网址 [用户名].github.io 访问自己的个人博客了。