使用hexo搭建个人博客

2020-07-05  本文已影响0人  suxin1932

title: 使用hexo搭建个人博客
toc: true


1.软件安装

1.1 下载并安装 node.js

1.1.1 下载地址

https://nodejs.org/en/

1.1.2 安装后验证

node -v

1.2 安装 cnpm

1.2.1 安装命令

npm install -g cnpm --registry==https://registry.npm.taobao.org

1.2.2 安装后验证 cnpm

cnpm -v

1.3 安装 hexo

1.3.1 安装命令

cnpm install -g hexo-cli

1.3.2 安装后验证 hexo

hexo -v

2.使用 hexo 搭建 blog

2.1 创建一个空白 dir, 并进入到该 dir, 比如

zx-hexo

2.2 在 zx-hexo 目录下, 初始化 blog

hexo init

2.3 本地启动 blog, 主要是本地预览文章用 (按下 ctrl+c 即可停止)

hexo s

使用下述网址即可访问本地部署的 hexo 博客
http://localhost:4000

2.4 在 zx-hexo 目录下, 安装上传图片到 github 的插件

cnpm install https://github.com/CodeFalling/hexo-asset-image --save

同时修改 zx-hexo 目录下, _config.yml文件配置

post_asset_folder:true

2.5 在 zx-hexo 目录下执行命令 'hexo n'新建一篇 blog, 进入该blog目录, 并用 md 工具比如(typora) 编辑该文章

E:\Programming\zx-hexo>hexo n "使用hexo搭建个人博客"
INFO  Created: E:\Programming\zx-hexo\source_posts\使用hexo搭建个人博客.md
>> 可以发现该source目录下被新建了一个 文件及文件夹
使用hexo搭建个人博客.md
使用hexo搭建个人博客
>> 在该文件中存放图片, 并在 md文件中引用即可
<img src="使用hexo搭建个人博客/xunlei.png" style="zoom:50%;" />

2.6 然后重新回到 zx-hexo 目录, 清理一下目录

hexo clean

2.7 重新生成

hexo g

2.8 再次重启, 预览即可看到

hexo s 

3.将 blog 部署到 github 个人主页上

3.1 在 zx-hexo 目录下安装 hexo-deployer-git

cnpm install --save hexo-deployer-git

3.2 编辑 zx-hexo 目录下的 _config.yml 文件, 在文件末尾添加如下内容

deploy:
  type: git
  repo: https://github.com/abc/abc.github.io.git
  branch: master
其中 repo 中的内容即为 github 个人主页链接地址, 关于如何创建 github 个人主页, 可自行百度即可

3.3 在 zx-hexo 目录下, 将本地 blog 推送到 git 仓, 可能需要输入 username & pwd

hexo d

3.4 推送成功后, 在浏览器中输入对应域名, 即可访问

https://abc.github.io

4.更换主题

4.1 假设要更换的主题是 maupassant

https://www.haomwei.com/technology/maupassant-hexo.html

4.2 在 zx-hexo 目录下, 依次执行命令:

git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
cnpm install hexo-renderer-pug --save
cnpm install hexo-renderer-sass --save

4.3 编辑 zx-hexo 目录下的 _config.yml 文件, 将theme的值改为maupassant

theme: maupassant

4.4 依次执行命令

hexo clean
hexo g 
hexo d 

4.5 再次在浏览器中输入对应域名, 即可发现主题已更换(可能会有几分钟延迟)

https://abc.github.io
上一篇 下一篇

猜你喜欢

热点阅读