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: fsevents@2.1.2 (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ hexo-cli@3.1.0
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: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ hexo-deployer-git@2.1.0
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: fsevents@2.1.2
...........
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\nunjucks\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: 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访问的,都是一样的。
修改内容,本地不用重新运行即可查看。
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: fsevents@2.1.2 ............ + hexo-deployer-git@2.1.0 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仓库,发现已经发布成功!
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![ftp.png](https://upload-images.jianshu.io/upload_images/15645795-3f77ed16ec4781ed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
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
然后在博客文章中加入:<meta name="referrer" content="no-referrer"/>
---
title: Docker安装常用软件2
tags:
- Docker
categories: ''
resources: ''
copyright: false
comments: true
date: 2019-12-31 12:56:42
top:
---
<meta name="referrer" content="no-referrer"/>