Hexo部署github博客

一、简介

使用github创建一个仓库为github.io就能变成一个使用域名能够访问的博客站点。然后我们通过Hexo创建文章,发布到github.io仓库,Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。Hexo能够快速生成博客和部署博客,使创建博客更加简单。

二、安装清单(Mac OS)

安装环境 安装原因
git 给github上传文章
Node.js Hexo基于Node.js开发
Hexo 生成博客静态页面

三、创建github.io网站

1)点击New repository

2)输入Repository name,必需为username.github.io格式。username替换为用户名

3)点击按钮Create repository

4)进入仓库username.github.io,点击setting,找到GitHub Pages模块

5)点击choose a theme选择一个页面主题

6)访问https://username.github.io就可以访问博客网站了

四、安装git

下载安装:http://sourceforge.net/projects/git-osx-installer/

验证是否安装成功:

➜  ~ git version
git version 2.15.0

五、安装Node.js

下载安装:https://nodejs.org/en/

验证是否安装成功:

➜  ~ node -v
v8.9.4

六、安装Hexo

安装命令: npm install -g hexo-cli

验证是否安装成功:

➜  ~ hexo -v
hexo-cli: 1.1.0
os: Darwin 17.3.0 darwin x64
http_parser: 2.7.0
node: 8.9.4
v8: 6.1.534.50
uv: 1.15.0
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.25.0
openssl: 1.0.2n
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

七、创建本地博文服务

  1. 然后创建一个空文件夹, 比如:hexo-blog
  2. 进入hexo-blog目录
  3. 执行hexo init初始化博客站点,如果最后一行显示Start blogging with Hexo!,代表创建成功
  4. 执行hexo server 启动博文站点
  5. 访问http://localhost:4000就能打开博文了
  6. Ctrl+C关闭服务器
➜  ~ mkdir hexo-blog
➜  ~ cd hexo-blog
➜  hexo-blog hexo init
INFO  Cloning hexo-starter to ~/hexo-blog
Cloning into '/Users/zhengyong/hexo-blog'...
remote: Counting objects: 68, done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 67
Unpacking objects: 100% (68/68), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into '/Users/zhengyong/hexo-blog/themes/landscape'...
remote: Counting objects: 838, done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 838 (delta 1), reused 3 (delta 0), pack-reused 832
Receiving objects: 100% (838/838), 2.55 MiB | 90.00 KiB/s, done.
Resolving deltas: 100% (441/441), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated titlecase@1.1.2: no longer maintained
npm WARN deprecated postinstall-build@5.0.3: postinstall-build's behavior is now built into npm! You should migrate off of postinstall-build and use the new `prepare` lifecycle script with npm 5.0.0 or greater.> fsevents@1.2.4 install /Users/zhengyong/hexo-blog/node_modules/fsevents
> node install[fsevents] Success: "/Users/zhengyong/hexo-blog/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile> nunjucks@3.1.3 postinstall /Users/zhengyong/hexo-blog/node_modules/nunjucks
> node postinstall-build.js srcnpm notice created a lockfile as package-lock.json. You should commit this file.
added 464 packages in 28.659s
INFO  Start blogging with Hexo!
➜  hexo-blog hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
^CINFO  Good bye

七、Hexo关联github

1)进入hexo-blog根目录

2)安装npm install hexo-deployer-git --save,用Hexo发布博文

3)打开hexo-blog根目录下的_config.yml,拉倒最下面, 修改Deployment方式如下:

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:type: gitrepository: https://github.com/username/username.github.iobranch: master

4)进入hexo-blog根目录执行如下命令(参考:https://hexo.io/zh-cn/docs/commands),第一次上传可能会让你输入git的用户名和密码

hexo clean
hexo generate
hexo deploy

5)如果成功,就可以打开 http://username.github.io,username替换成自己用户名

八、使用Hexo创建和发布文章

1) 进入hexo-blog根目录

2) 创建文章命令:hexo new "文章标题"

➜  blog hexo new "Hexo部署github博客"
INFO  Created: ~/Documents/GitHub/hexo-blog/source/_posts/Hexo部署github博客.md

3) 打开编辑Hexo部署github博客.md文件进行Markdown编辑

open ~/Documents/GitHub/hexo-blog/source/_posts/Hexo部署github博客.md`

4)发布文章:hexo d -g

➜  blog hexo d -g
INFO  Start processing
INFO  Files loaded in 922 ms
INFO  Generated: index.html
INFO  Generated: archives/2018/09/index.html
INFO  Generated: archives/index.html
INFO  Generated: 2018/09/03/hello-world/index.html
INFO  Generated: archives/2018/index.html
INFO  Generated: 2018/09/03/my-first-hexo-blog/index.html
INFO  Generated: fonts/iconfont.8c627f.woff
INFO  Generated: fonts/iconfont.45d7ee.svg
INFO  Generated: fonts/iconfont.16acc2.ttf
INFO  Generated: fonts/default-skin.b257fa.svg
INFO  Generated: fonts/tooltip.4004ff.svg
INFO  Generated: img/default-skin.png
INFO  Generated: img/scrollbar_arrow.png
INFO  Generated: img/preloader.gif
INFO  Generated: fonts/iconfont.b322fa.eot
INFO  Generated: slider.e37972.js
INFO  Generated: mobile.992cbe.js
INFO  Generated: main.0cf68a.js
INFO  Generated: main.0cf68a.css
INFO  Generated: 2018/09/04/Hexo部署github博客/index.html
INFO  20 files generated in 475 ms
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
warning: CRLF will be replaced by LF in fonts/tooltip.4004ff.svg.
The file will have its original line endings in your working directory.
[master d1c205f] Site updated: 2018-09-04 11:11:086 files changed, 835 insertions(+)create mode 100644 2018/09/04/Hexo部署github博客/index.html
To https://github.com/zyongjava/zyongjava.github.io3f0aab7..d1c205f  HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'https://github.com/zyongjava/zyongjava.github.io'.
INFO  Deploy done: git

九、参考文献

  1. https://www.jianshu.com/p/863f3f2d1733
  2. https://hexo.io/zh-cn/docs/commands

十、示列博客

移步:https://zyongjava.github.io/

Hexo部署github博客相关推荐

  1. hexo搭建Github博客上传后,网页显示404问题解决方案

    问题如标题所示,"hexo上传博客后,网页始终显示404,无法刷新网页".奋战几天查各种资料后问题终于得到解决,我感觉很有必要记录一下解决过程和解决方案,网页无法打开的原因真的很让 ...

  2. hexo与github博客搭建+自动部署+反向代理资源找不到问题+各种踩坑

    目录 前言: 需要准备: Hexo的搭建 初始化 主题的选择 上传github 部署自动action 反向代理 成功! 前言: Hexo搭建确实是一个便捷灵活的博客框架,但是里面不免存在很多坑. 在这 ...

  3. 转:20分钟教你使用hexo搭建github博客

    注册Github账号 这里我们就不多讲了,小伙伴们可以点击这里,进入官网进行注册. 创建仓库 图片来自Github 登录账号后,在Github页面的右上方选择New repository进行仓库的创建 ...

  4. linux hexo使用教程,Linux下使用Hexo搭建github博客(示例代码)

    找到一篇靠谱的博客,备份一下: ---------以下原文------------------ Nodejs安装 因为hexo是基于nodejs的应用,所以要先安装nodejs才可以.我这里以Ubun ...

  5. 用hexo搭建GitHub博客(+图床)

    图床 图床同样可以使用github只需要上传图片到仓库,然后通过https://raw.githubusercontent.com/xfx98/仓库名/分支名/文件路径名 的方式访问图片如https: ...

  6. 【Web前端】hexo+GitPages搭建博客

    hexo建站 Hexo是基于node的,上传需要用到git,上传后存储到github上面. 一.配置环境 1.安装Node, 用来生成静态页面的 (1)下载地址:https://nodejs.org/ ...

  7. hexo+github部署个人博客

    文章目录 hexo+github部署个人博客 前期准备 hexo搭建个人博客 新建GitHub仓库 将个人博客部署到Git pages 写文章和发布文章 Hexo优化 修改博客目录下的_config. ...

  8. Hexo+GitHub 博客部署 个人踩坑记录(一)

    Hexo+GitHub 博客部署 个人踩坑记录(一) 前言 博客的作用 编程学习本身是持续性的学习行为,说明所学习的内容是在持续地增加.这要求我们要学会阶段性总结自己所学的东西,复习并巩固.所以写文章 ...

  9. 使用github page + Hexo搭建个人博客折腾记

    网上各种找资料,折腾了好久,终于把自己的个人博客搭建成功.现把自己使用github+hexo搭建的过程再一步步整理出来.我的 hexo 是 3.3.1 版本,hexo 3.0以上版本和3.0以下版本的 ...

最新文章

  1. GitHub推出云端IDE,几秒完成开发环境配置,今后可以在浏览器里使用VS Code了
  2. 仿小米简约Calculator
  3. 万万没想到,钉钉居然是个AI平台
  4. python程序员发展-Python程序员的进化史
  5. STM32:从菜鸟到牛人就是如此简单!为了学习单片机而去学习单片机的思路是不对的
  6. 为什么在进程中还需要线程呢?
  7. 网站页面HTML代码优化需要注意的问题
  8. linux 视频编辑 ffmpeg,ffmpeg转码视频真的好用!(ffmpeg的简单使用方法)
  9. μC/OS-III---I笔记3---时间管理
  10. (25)System Verilog类外约束类内变量
  11. zepto源码--filtered, contains,funcArg,setAttribute,className,deserializeVale--学习笔记
  12. 嵌入式系统——软件设计
  13. python 读取access_python读取数据access出错
  14. Java入门到进阶推荐书籍
  15. 禁用联想笔记本电脑自带的键盘
  16. 标杆企业华为背景——张蕾老师
  17. 电子或者自动化同学以后做什么
  18. 笔记:《高效能人士的七个习惯》第一章 由内而外全面造就自己
  19. 最新Oracle官网JDK 8.0的下载
  20. 如何解决苹果电脑键盘失灵的问题

热门文章

  1. 卡巴斯机 任务执行时出现错误
  2. 《强化学习周刊》第31期:康奈尔大学推出基于强化学习的数据库调优工具DB-BERT...
  3. 如何用蓝牙网关跟蓝牙设备建立服务链接并读取数据
  4. 井身结构示意图绘制(WPF)
  5. 延缓干细胞老化的技巧和方法?
  6. 冷门K12行业纯蓝海副业思路:视频号带货错题打印机,玩法无私分享给你
  7. asp期刊学报稿件网络在线投稿系统
  8. matlab编程误差分析,基于MATLAB的圆度误差分析.pdf
  9. 全网通之静态/默认路由器配置
  10. 拼多多2021笔试真题集