Github+Hexo+next7 搭建个人博客 2020-04-10

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访问的,都是一样的。

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: 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仓库,发现已经发布成功!
    
    
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![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"/>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • 妈妈说:小时候的我特别倔强,脾气特别大,谁惹的我,谁最后再给我说好话,要不然不吃不喝一直生闷气 小时候...
    仰望天空的猫阅读 353评论 2 3
  • 此刻的我,坐在贵阳龙洞堡国际机场。我又一次要出发了,又一次不知道所去,不知方向。 因为工作压力大,心情烦闷,因此...
    马编编阅读 112评论 0 1
  • 第四章 三界之争 即使桃花小镇属于妖界边境但距离方天外却也甚远,御风之术全力施展开来洮涯也用了半天时间赶到方天外境...
    飞雪折翼阅读 291评论 0 0
  • 南宋画家。马麟,钱塘(今浙江杭州)人。马世荣之孙,马远之子。马麟画承家学,擅画人物、山水、花鸟,用笔圆劲,轩昂洒落...
    郑辉贤国学艺术阅读 441评论 0 2