Fork me on GitHub

Hexo + Github 搭建个人博客

简介

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


安装清单(Windows)

安装内容 作用
Git 把本地的网站push到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

1
git version

安装Node.js

1
node -v

安装Hexo

  • git bash中输入:
1
npm install -g hexo-cli

开始在本地上写博客

  1. 然后创建一个空文件夹, 比如:hexo-blog
  2. 进入hexo-blog目录
  3. 执行hexo init初始化博客站点,如果最后一行显示Start blogging with Hexo!,代表创建成功
  4. 执行hexo server 启动博文站点
  5. 访问http://localhost:4000就能打开博文了
  6. Ctrl+C关闭服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
➜  ~ 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 src

npm 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,拉倒最下面, 修改deploy方式如下:
1
2
3
4
deploy:
type: git
repository: https://github.com/username/username.github.io
branch: master
  1. 进入hexo-blog根目录执行如下命令(参考: https://hexo.io/zh-cn/docs/commands),第一次上传可能会让你输入git的用户名和密码
1
2
3
hexo clean
hexo generate
hexo deploy

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

使用Hexo创建和发布文章

  1. 进入hexo-blog根目录

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

    1
    blog hexo new "Hexo + Github 搭建个人博客"
  3. 打开编辑 Hexo + Github 搭建个人博客.md 文件进行Markdown编辑

  4. 发布文章:hexo d -g 注意一下,这里要加上-g参数,要不很可能提交上去,但是页面内容不更新
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    ➜  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/10/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:08
    6 files changed, 835 insertions(+)
    create mode 100644 2018/10/04/Hexo + Github 搭建个人博客/index.html
    To https://github.com/zyongjava/zyongjava.github.io
    3f0aab7..d1c205f HEAD -> master
    Branch 'master' set up to track remote branch 'master' from 'https://github.com/zyongjava/zyongjava.github.io'.
    INFO Deploy done: git


神奇的Hexo就搭建完成了,下篇文章将讲述一些Hexo的奇淫技巧!!!!

------ 本文结束感谢您的阅读 ------
如果觉得我的文章对您有帮助,请随意打赏3元请我买瓶可乐( •̀ ω •́ )。您的支持将鼓励我创作更好的文章。