1. Git 下载(Git for windows 国内下载)、安装(安装时请勾选Add to PATH选项)、配置、生成SSH公钥
2. Github 账号申请 / Gitee(码云)账号申请、GitHub Windows客户端、配置SSH Keys
3. Node.js 下载安装
4. 文件编辑器 Markdown / Typora / Sublime Text / Notepad++
Hexo 是一个快速、简洁且高效的Node.js静态博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
本教程Hexo 安装版本为:vs_3.4.3;Node.js 版本为:vs_8.9.3。安装 Hexo 之前请先确保 Git 及 Node.js 安装成功,接下来只需要使用 NPM 即可完成 Hexo 的安装。
在计算机新建一个文件夹作为本地仓库,进入到文件夹 中单击右键,选择 “Git Bash Here” , 进入Git Bash进行Hexo 下载:
方法一:
安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm安装hexo
$ cnpm install -g hexo-cli
方法二:
$ npm install -g hexo-cli
如果安装失败,尝试切换安装源后再执行安装命令 npm install -g hexo-cli
官方源:
npm config set registry https://registry.npmjs.org/
淘宝镜像:
npm config set registry http://registry.npm.taobao.org/
注:如果提示权限错误,命令前加sudo
,cnpm
是淘宝的开源镜像,国内访问比npm
快。
Hexo 更新至最新版本,命令如下:
$ npm update hexo -g
确认cnpm的版本和Hexo 版本信息,查看是否安装完成
$ cnpm -v
$ hexo -v
执行下列初始化命令,Hexo 将会在当前文件夹中生成一个名为blog的文件(可以根据需要修改命令即可修文件名),文件内容包括:node_modules、scaffolds、source、themes等文件
$ hexo init blog
$ cd blog
$ npm install
输入以下命令生成静态页面:
$ hexo generate
新建完成后,指定文件夹的目录如下:
.
├── _config.yml 网站的配置信息,您可以在此配置大部分的参数
├── package.json 应用程序的信息
├── scaffolds 模板文件夹
├── source 资源文件夹,存放用户资源
| ├── _drafts
| └── _posts
└── themes 网站主题文件夹
接着输入命令启动服务:
$ hexo server
打印信息如下表示服务启动成功:
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
然后在浏览器中访问:http://localhost:4000/,如果4000端口被占用,可以更改端口号为8081
$ hexo s --p 8081
INFO Start processing
INFO Hexo is running at http://localhost:8081/. Press Ctrl+C to stop.
如果博客出现中文乱码,使用编辑器编辑 _config.yml 文件,设置编辑器的编码为 UTF-8 后进行保存即可。
安装插件
到博客根目录打开Git bash here执行安装命令
cnpm install hexo-generator-searchdb –save
修改站点配置文件
打开_config.yml 配置文件,在最底下添加下面代码
search:
path: search.xml
field: post
format: html
limit: 10000
path:表示搜索后生成的文件路径,可以生成xml和json两种格式;search.xml不可以就改为search.json field:表示搜索的范围,有“post、page和all”三种值。 post:所有的文章; page:所有顶部导航选项的页面; all:所有的文章和顶部导航选项的页面。 content:是否包含搜索到的文章的全部内容。如果false,生成的结果只包括标题和创建时间这些信息,没有文章主体。默认情况下是true. format:搜索到的内容、选项的格式。 html(默认):将html原文本缩略。 striptags:将html原文本缩略,并删除所有标记。 raw:记下每一篇文章或每一页的文字。
使用插件
打开博客目录目录,找到当前正在使用的主题的“_config.yml”文件,打开进行编辑,找到“local_search”, 不同模板这个字段可能不同,修改enable的值为true。
# 本地搜索
search_box:
enable: true
进入\source\_posts文件下新建后缀为.md的markdown文件,编辑并保存,这就是一篇新的博文
也可以通过命令创建,常见命令如下
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面,不会作为文章出现在博文目录。
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
如果博客的样式不对,尝试在_config.yml中配置下博客地址和路径:
url: https://github.com/用户名/用户名.github.io.git/blog/
root: /blog
新建仓库 new repository ,命名为你的用户名.github.io
(必须是你的用户名,其它名称无效,邮箱需要认证)
创建好仓库后,复制仓库地址:github.com/用户名/用户名.github.io.git
修改 _config.yml 配置文件 ,打开文件后找到 deploy, 修改如下:(注意冒号后面有一个空格: )
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
##repo: https://gitee.com/用户名/用户名.git
repo: https://github.com/用户名/用户名.github.io.git
branch: master
message:
编辑完成后进行保存,接着安装自动部署发布工具 hexo-deployer-git,命令如下:
$ npm install hexo-deployer-git --save
等待安装完成以后,执行如下配置命令:
$ hexo deploy
发布新博客或者更新配置文件,需要重新部署一下,首次发布需要输入账号和密码,命令如下:
$ hexo clean
$ hexo generate
$ hexo deploy
在Github的上边栏选择Settings
找到GitHub pages设置界面
按如图所示选择,注意,选择source之后记得Save,然后点击Choose a theme选择一个博客主题,然后点击Select theme
在Gitee中选择服务下面的Gitee Pages,进行服务部署
发布完成,在Github/Gitee中部署项目
正常部署完成后打开浏览器输入:【https://您的 Github 名称/github.io】进行访问,例如:https://用户名.github.io。
修改配置
Asia/Shanghai
。其他相关详细配置信息请参考 Hexo 配置 :https://hexo.io/zh-cn/docs/configuration.html
选择主题
使用的主题都是放在/themes这个目录下,Hexo默认使用的是landscape
主题,下载新的主题下来后,解压放入/themes文件夹下
选择一个自己喜欢的Hexo主题 :https://hexo.io/themes/;https://github.com/hexojs/hexo/wiki/Themes
输入命令克隆主题:git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even ,
完成后可以看到/themes下新增了even
文件夹。
以下为推荐主题:
主题更新
修改_config.yml文档内容中theme的值,将默认主题修改为下载的主题名(即/themes/下的
文件名称)
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: even
本地启动时,主题更新需要将服务重启。部署到GitHub后,进入到主题文件夹的目录下(如:../blog/themes/yilia/)执行推送更新命令
$ git pull
然后返回到文件夹 ../blog 下,每次修改完配置文件,需要重新部署项目
$ hexo clean
$ hexo generate
$ hexo deploy
我们需要将图片上传到外部服务后,在博客中使用生成的图片url,这里推荐PicGo软件,也可以上传到qq微博等能公开访问的第三方平台
使用Github:https://blog.csdn.net/qq_45163122/article/details/105584394
使用Gitee:https://blog.csdn.net/u013206259/article/details/105911868
链接:https://github.com/EYHN/hexo-helper-live2d
模型安装命令
npm install --save hexo-helper-live2d
npm install --save live2d-widget-model-tororo
#在hexo的_config.yml的文件下添加(非主题配置文件)
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
# 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
tagMode: false
debug: false
# 更换模型
# 使用 npm install 模型的包名 来安装,然后将包名输入位于 _config.yml 的 model.use 中.
model:
use: live2d-widget-model-hijiki
#use: live2d-widget-model-tororo
display:
position: right
width: 150
height: 300
hOffset: 40
vOffset: -38
# 手机是否显示
mobile:
show: false
scale: 0.2
# 透明度
react:
opacityDefault: 0.8
opacityOnHover: 0.2
参考:
使用Node.js+Hexo+Github搭建个人博客:https://www.cnblogs.com/wumz/p/8030244.html
使用Hexo、Node.js、Gitee搭建个人博客:https://wxtsy.gitee.io/2020/07/06/blog/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A220200706/
三分钟在GitHub上搭建个人博客:https://zhuanlan.zhihu.com/p/28321740
用github page搭建博客:https://www.zhihu.com/question/59088760