github+Hexo 搭建博客
目录：
- 1、安装node.js及检验是否安装成功
- 2、安装git及检验是否安装成功
- 3、安装Hexo
- 4、Hexo初始化博客配置
- 5、本地运行博客
- 6、将博客上传发布到github
- 7、Hexo 使用next主题模板
1、安装node.js
安装node.js 参考地址：https://www.jianshu.com/p/c0ef0dc0ebdc
2、安装git
描述：windows下载地址：windows git 默认会根据你的电脑下载适合版本类型
流程：双击下载的：Git-2.23.0-64-bit.exe --> 一直点击Next就可好(可以更改一下git安装路径).
3、安装Hexo
新建D:\Blog_hexo文件夹，cmd进入该文件夹D:\Blog_hexo下
命令
#安装 hexo -g全局安裝
npm install hexo-cli -g
#安装 hexo 部署到 git page 的 deployer
npm install hexo-deployer-git --save
#检测是否安装成功
D:\blog>hexo -v
hexo-cli: 3.1.0
命令演示：
#安装 hexo
D:\blog>npm install hexo-cli -g
D:\nodejs\node_global\hexo -> D:\nodejs\node_global\node_modules\hexo-cli\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
updated 1 package in 11.709s
#安装 hexo 部署到 git page 的 deployer
D:\blog>npm install hexo-deployer-git --save
npm WARN saveError ENOENT: no such file or directory, open 'D:\blog\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\blog\package.json'
npm WARN blog No description
npm WARN blog No repository field.
npm WARN blog No README data
npm WARN blog No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ [email protected]
added 76 packages from 368 contributors in 10.673s
#检测是否安装成功
D:\blog>hexo -v
hexo-cli: 3.1.0
4、Hexo初始化博客配置
命令
#初始化配置+博客名
hexo init 博客名
#进入博客名 文件夹
cd 博客名
#安装需要的相关依赖
npm install
命令演示：
#hexo 初始化配置+博客名
D:\blog>hexo init zhengjiaao
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into 'D:\blog\zhengjiaao'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
....................
#成功标识
INFO Start blogging with Hexo!
#进入博客名 文件夹
D:\blog>cd zhengjiaao
#安装需要的依赖
D:\blog\zhengjiaao>npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
...........
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\nunjucks\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
#相关依赖安装成功标识
up to date in 115.56s
5、本地运行博客
命令
#cmd 进入博客根目录
#默认 4000端口运行
hexo s
#自定义端口运行
hexo s -p 端口
命令演示：
D:\blog\zhengjiaao>hexo s -p 5555
INFO Start processing
INFO Hexo is running at http://localhost:5555 . Press Ctrl+C to stop.
浏览器访问：http://localhost:5555/ ，默认Hexo页面效果。
效果图：访问路径是http://localhost:5555/，这里我使用的效果图是github访问的，都是一样的。
hexo_1.png
修改内容，本地不用重新运行即可查看。
D:\blog\zhengjiaao\source_posts\hello-world.md文件添加内容
## Hello Hexo
保存，刷新 http://localhost:5555/，查看新增内容
6、将博客上传发布到github
前提：
1.创建一个仓库
转到GitHub并创建一个名为username .github.io 的新存储库，其中username是您在GitHub上的用户名（或组织名称）。
如果存储库的第一部分与您的用户名不完全匹配，则它将无法正常工作，因此请确保正确无误。
#username为github名称
https://github.com/username/username.github.io
-
6.1 修改配置:D:\blog\zhengjiaao\_config.yml文件内容
#博客作者 author: zhengjiaao #url 博客地址 url: https://zhengjiaao.github.io #发布到哪个仓库的哪个分支 deploy: type: git repo: https://github.com/zhengjiaao/zhengjiaao.github.io.git branch: master -
执行发布到github上
进入D:\blog\zhengjiaao 打开cmd
命令：
#先生成 hexo g #再提交到github hexo d命令演示：记住要关闭本地运行
#关闭本地运行 D:\blog\zhengjiaao>hexo s -p 5555 INFO Start processing INFO Hexo is running at http://localhost:5555 . Press Ctrl+C to stop. #Ctrl+C 终止(退出) INFO Bye! 终止批处理操作吗(Y/N)? y #先生成 D:\blog\zhengjiaao>hexo g INFO Start processing ..... INFO Generated: css/images/banner.jpg INFO 28 files generated in 672 ms #再提交到github D:\blog\zhengjiaao>hexo d ERROR Deployer not found: git #上面提示,没有安装hexo-deployer-git #安装hexo-deployer-git D:\blog\zhengjiaao>npm install hexo-deployer-git --save npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] ............ + [email protected] added 1 package from 1 contributor in 8.229s #再次执行 D:\blog\zhengjiaao>hexo g INFO Start processing INFO Files loaded in 130 ms INFO 0 files generated in 50 ms D:\blog\zhengjiaao>hexo d INFO Deploying: git INFO Setting up Git deployment... Initialized empty Git repository in D:/blog/zhengjiaao/.deploy_git/.git/ .............. To https://github.com/zhengjiaao/zhengjiaao.github.io.git + 612ba3b...85e3ee6 HEAD -> master (forced update) Branch 'master' set up to track remote branch 'master' from 'https://github.com/zhengjiaao/zhengjiaao.github.io.git'. �[32mINFO �[39m Deploy done: �[35mgit�[39m #此时查看github仓库，发现已经发布成功！访问博客地址 https://zhengjiaao.github.io/ 或 https://zhengjiaao.github.io/index
效果图：
hexo_1.png
7、Hexo 启用next主题模板
官网主题 地址：https://hexo.io/themes/
next主题：
测试使用next主题，也是大多数人比较喜欢的主题之一。
next主题官网参考：next主题官网
next主题github地址: next5 旧版本。
next主题github地址：next7 建议用这个新的版本.
下载next主题：
命令：
#cmd 进入博客根目录
#下载next主题 版本5 ,不推荐(已经不维护)
git clone https://github.com/iissnan/hexo-theme-next.git themes/next5
#下载next主题 最新版本7,推荐
git clone https://github.com/theme-next/hexo-theme-next themes/next7
_config.yml 配置文件有两个：
**站点配置文件 **: D:\blog\zhengjiaao\_config.yml
主题配置文件 : D:\blog\zhengjiaao\themes\next\_config.yml
站点配置文件是博客根目录下的_config.yml，主题配置文件是下载的主题下的_config.yml.
站点配置文件：
#将默认主题landscape,修改为next主题
#theme: landscape
theme: next7
启动博客：
#进入博客根目录：
#清除博客缓存
hexo clean
#生成静态文件
hexo g
#启动博客 默认端口4000 或置顶端口运行 hexo s -p -5555
hexo s
#浏览器访问：http://localhost:4000/
#可看到next主题页面
hexo常见错误：
1.hexo g 命令报错
#错误信息
end of the stream or a document separator is expected at line
解决方式：在文章中头部添加
---
title: 新增第一篇文章
tags:
- Docker
categories: ''
resources: ''
copyright: false
comments: true
date: 2019-12-31 12:56:42
top:
---
###开始编写文章内容
2.图片链接错误
错误：将的文章下载下来，放到hexo博客中，发现图片报错。
Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
TypeError [ERR_INVALID_URL]: Invalid URL: ftp://129.204.207.127:21
at onParseError (internal/url.js:243:9)
解决方式：将从获取的文章打开，去掉把所有的图片路径的以下链接参数。
?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
3.文章中插入网络图片不显示
#cmd 进入博客根目录
npm uninstall -g hexo-renderer-marked-lazy
npm uninstall -g hexo-renderer-marked-lazy
然后在博客文章中加入：
---
title: Docker安装常用软件2
tags:
- Docker
categories: ''
resources: ''
copyright: false
comments: true
date: 2019-12-31 12:56:42
top:
---