个人博客的创建-使用详解
September 18, 2021
1731
关于如何创建属于自己的博客呢?其实在今日之前,我也不清楚!
说来惭愧,作为一名有三年前端经验的开发者来说不会这个确实有点尴尬 ~ 今天得亏隔壁前端大佬在更新博客,于是乎我就跟着操作了一遍,这里呢,做个学习记录,也算做是我的个人博客第一篇内容了!!! 下面直接捞干货:
一、什么是Hexo?
Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架。这里我们选用的是GitHub,Hexo同时也是GitHub上的开源项目.
二、环境安装
安装 node 跟 npm(开发电脑基本都会有配置,如不会烦请百度!)
安装 hexo
1
cnpm install -g hexo-cli
安装后验证hexo
1
hexo -v
使用 hexo 搭建 blog
(1).创建一个空白 dir, 并进入到该 dir, 比如
1
zx-hexo
(2).在 zx-hexo 目录下, 初始化 blog
1
hexo init
(3).本地启动 blog, 主要是本地预览文章用 (按下 ctrl+c 即可停止)
1
hexo s
(4).使用下述网址即可访问本地部署的 hexo 博客
1
http://localhost:4000
(5).在 zx-hexo 目录下, 安装上传图片到 github 的插件
1
cnpm install https://github.com/CodeFalling/hexo-asset-image --save
(6).同时修改 zx-hexo 目录下, _config.yml文件配置
1
post_asset_folder:true
(7). 其中hexo clean:清理目录 hexo g:重新生成 hexo s: 再次启动,预览即可看到
(8). 如果要用到其他的主题,可以在hexo官网的主题中挑选合适的主题使用,具体使用步骤根据主题配置说明走就可以了https://hexo.io/themes/
三、更换主题
假设要更换的主题是 maupassant
1
https://www.haomwei.com/technology/maupassant-hexo.html
在 zx-hexo 目录下, 依次执行命令:
1
2
3git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
cnpm install hexo-renderer-pug --save
cnpm install hexo-renderer-sass --save编辑 zx-hexo 目录下的 _config.yml 文件, 将theme的值改为maupassant
1
theme: maupassant
依次执行命令
1
2
3hexo clean
hexo g
hexo d
四、将hexo放到github仓库上
完成了hexo的安装后, 我们只能在本地访问. 因此我们将它放到github上, 方便我们随时随地的用网址访问。
Blog文件夹目录下输入: cnpm install –save hexo-deployer-git 用来安装git部署的插件
GitHub上去建一个repository. 注意名字只能是” github账户名.github.io “.
置_config.yml. 在Blog目录下找到_config.yml使用vscode或者sublime等编辑器打开.按照如下配置Deployment:
1
2
3
4deploy:
type: git
repo: https://github.com/wowangmouren/wowangmouren.github.io
branch: master输入: hexo d 来将hexo部署到github. 中途会让你输入你的github用户名和密码. 输入就行.
成功后就可以在浏览器输入github用户名.github.io来进入自己的博客了.
- 本文作者:wowangmouren
- 本文链接:https://wangwewntao.top/2021/09/18/wmr_01/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!