效果预览:https://hexo.io/docs/quickstart.html
准备:
- Windows电脑。
- GitHub账号。
- 使用Hexo框架搭建个人网站。
安装过程:
(1)Node.js安装:按照以下步骤依次点击即可,安装过程很简单。
a. 访问Node.js官网(https://nodejs.org/)下载相应的版本。
b. 双击安装包进行安装。
c. 打开命令行窗口,输入node -v和npm -v查看是否安装成功。
(2)Git安装:按照网上的安装方式进行安装即可。
a. 访问GitHub官网下载Git客户端(https://git-scm.com/)。
b. 双击安装包进行安装。
c. 打开命令行窗口,输入git -v查看是否安装成功。
(3)Hexo安装:以下出现的检测全部是在Git中进行的。
a. 检测Node.js安装是否成功:
node-v npm-v
b. 安装淘宝的镜像源(如果错误就重来,因为连接可能不稳定,不要害怕多试几次就可以了):
npm install -g cnpm --registry=https://registry.npm.taobao.org
c. 建立仓库:
git init <仓库名>
d. 在个人网站目录下安装一个Hexo部署插件:
cnpm install --save hexo-deployer-git
e. 打开Blog目录下的_config.yml文件,使用编辑器打开,建议使用Visual Studio Code打开。
注意:Visual Studio Code的好处:
- 支持的语言种类多。
- 视图简洁。
- 拥有插件种类多。
修改配置:
-
找到以下部分代码:
type: git repository: <仓库地址> branch: master -
对这段代码进行更改:
a.type:填写一个名字,建议写成git方便识别。
b.repository:将刚刚新建的GitHub仓库地址复制到这里。
c.branch:设置管理员master。
修改后保存。
部署到GitHub:
- 在Git中输入以下命令,将本地文件部署到GitHub新建的仓库中:
hexo d
访问网站:
- 通过访问以下链接即可访问部署到GitHub上的个人网站(以仓库名为示例):
https://<仓库名>.github.io
进一步深化操作过程(更换主题):
这里以yilia主题为例进行更换。
-
下载yilia主题:
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia -
找到Blog文件中的_config.yml文件,使用编辑器打开,建议使用Visual Studio Code打开。
-
找到以下部分代码(即theme):
theme: <主题名称> -
将冒号后面的内容改为刚刚新建的yilia。
修改后保存。
清除数据库和生成静态网站:
-
输入以下命令,清除数据库:
hexo clean -
输入以下命令,生成静态网站:
hexo generate -
将生成的代码上传到GitHub仓库的根目录下,确保没有.git文件夹,即可完成个人网站的搭建。