Hexo-博客搭建全过程

环境准备

  1. 工具:Windows 、Git、 Intllij IDEA + Markdown 插件 、Node.js 、Cygwin(该软件的安装使用请参考本人的Cygwin系列教程)
  2. 个人配置
momin@MrRobot:~$ systeminfo.exe
 主机名:           MRROBOT
 OS 名称:          Microsoft Windows 10 专业版
 OS 版本:          10.0.10586 暂缺 Build 10586
 OS 制造商:        Microsoft Corporation
 OS 配置:          独立工作站
 OS 构件类型:      Multiprocessor Free
momin@MrRobot:~$ git --version
 git version 2.7.4
momin@MrRobot:~$ npm -v
 3.7.3
momin@MrRobot:~$ more build.txt
 IU-145.597.3
momin@MrRobot:~$

安装Node
  到 Node.js官网 下载相应平台的最新版本,一路安装即可。我用的是 node-v4.4.3-x86.msi,安装完成后在终端输入:npm -v 验证是否安装成功,顺利输出node.js的话则成功安装。

安装Git
  1. Git的客户端很多,个人用的是git官网(https://git-scm.com/download/), 下载下来的自带git-bash、gitk。你用第三方的git工具也可以,只要你自己习惯就好。
  2. 配置git
    1 git config
    git config --global user.name 用户名
    git config --global user.email 邮箱
    完成后git config --list 或者 cat ~/.gitconfig 确认配置正确

momin@MrRobot:~$ git config --global user.name "xxx"
momin@MrRobot:~$ git config --global user.email "xxx@xxx"
momin@MrRobot:~$ git config --list 
 user.name=chenshang
 user.email=2414973330V@gmail.com
 alias.stt=status
 alias.sts=stash
 alias.stg=stage
 color.ui=auto
momin@MrRobot:~$

2 生成ssh key

ssh-keygen  -t rsa(注意没有sudo)
cat ~/.ssh/id_rsa.pub  并拷贝

安装Cygwin
  请参照我的Cygwin系列博客

配置GitHub
  1. 请到GitHub上注册自己账号,并新建一个仓库,仓库的命名规则是,你的GitHub用户名+ . +github+ . +io 这就是你以后生成博客地地址.
  2. 将地二步中生成的key添加到GitHub中,这样你就可以从你的远程仓库下载和上传东西了

Node.js 源设置

alias cnpm="npm --registry=https://registry.npm.taobao.org --cache=$HOME/.npm/.cache/cnpm --disturl=https://npm.taobao.org/dist --userconfig=$HOME/.cnpmrc"

以上相当于制定了node.js的源,并从新设置了一个别名叫cnmp ,这样下载插件的时候会快一点

安装 Hexo
  1. 安装 Hexo(注意,现在是 cnpm 开头了,不是 npm 了):cnpm install -g hexo-cli
   安装时间不一定很快,有可能需要等 3 ~ 5 分钟。安装完有 WARN 警告也没关系的。

博客搭建

新建一个文件夹 <i class="fa fa-folder"></i> hexo-study 用来存放你的博客系统
进入该目录,执行 hexo init 命令 ,输出如下结果说明博客系统初始化完成,中间出现 WARN 也没事。

momin@MrRobot:/cygdrive/d/blog$ mkdir hexo-study
momin@MrRobot:/cygdrive/d/blog$ cd hexo-study/
momin@MrRobot:/cygdrive/d/blog/hexo-study$ ls
momin@MrRobot:/cygdrive/d/blog/hexo-study$ hexo init
INFO  Cloning hexo-starter to D:\blog\hexo-study
正克隆到 'D:\blog\hexo-study'...
remote: Counting objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
展开对象中: 100% (53/53), 完成.
检查连接... 完成。
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
正克隆到 'themes/landscape'...
remote: Counting objects: 730, done.
remote: Total 730 (delta 0), reused 0 (delta 0), pack-reused 729
接收对象中: 100% (730/730), 2.51 MiB | 457.00 KiB/s, 完成.
处理 delta 中: 100% (385/385), 完成.
检查连接... 完成。
Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e22468d38'
INFO  Install dependencies
    。。。。。。
  +-- opn@4.0.1
  | `-- pinkie-promise@2.0.1
  |   `-- pinkie@2.0.4
  `-- serve-static@1.10.2
    +-- escape-html@1.0.3
    `-- send@0.13.1
      +-- destroy@1.0.4
      +-- etag@1.7.0
      +-- fresh@0.3.0
      +-- http-errors@1.3.1
      +-- range-parser@1.0.3
      `-- statuses@1.2.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11
INFO  Start blogging with Hexo!
momin@MrRobot:/cygdrive/d/blog/hexo-study$

我们先ls看一下,初始化后的目录结构应该是这样的

momin@MrRobot:/cygdrive/d/blog/hexo-study$ ls
_config.yml  node_modules  package.json  scaffolds  source  themes

接下来我们运行 hexo clhexo g 两个命令来生成静态博客,我来解释一下 hexo cl = hexo cleanhexo g =hexo generate ;从名字上可以看出,clean 就是清理生成的文档,generate就是生成静态文档,hexo g 的时候如果不报错的话说明你的各项配置都是没有问题的了,恭喜你就这么建单,马上你就能看到你的博客长什么样子了。

momin@MrRobot:/cygdrive/d/blog/hexo-study$ hexo cl
momin@MrRobot:/cygdrive/d/blog/hexo-study$ hexo g
INFO  Start processing
INFO  Files loaded in 221 ms
INFO  Generated: index.html
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: archives/index.html
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: archives/2016/04/index.html
INFO  Generated: archives/2016/index.html
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: js/script.js
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: 2016/04/22/hello-world/index.html
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  28 files generated in 743 ms
momin@MrRobot:/cygdrive/d/blog/hexo-study$

接下来执行hexo s 也就是hexo server的缩写,来启动hexo 服务,这时候你的博客网站就可以在本地打开了

momin@MrRobot:/cygdrive/d/blog/hexo-study$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

我们来看看最开始博客长什么样子

hexo最开始的样子.PNG

我们进入themes文件夹看看有什么,发现landscape是hexo自带的主题

momin@MrRobot:/cygdrive/d/blog/hexo-study$ cd themes/
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ ls
landscape
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ tree -L 2
.
└── landscape
    ├── _config.yml
    ├── Gruntfile.js
    ├── languages
    ├── layout
    ├── LICENSE
    ├── package.json
    ├── README.md
    ├── scripts
    └── source

5 directories, 5 files
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$

嫌自带的主题太丑了怎么办? 我推荐一套主题给大家 git@github.com:chen-shang/Hexo-Theme-TaiJi.git 这个主题是我自己在yelee主题的基础上修改的,后面会教大家怎么在原有主题的基础上进行修改。大家也可以拿我这套主题Taiji(太极)进行修改。
我的主题先来看看他的颜值

彩蛋1.PNG
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ git clone git@github.com:chen-shang/Hexo-Theme-TaiJi.git ./back
正克隆到 './back'...
remote: Counting objects: 2286, done.
remote: Compressing objects: 100% (133/133), done.
接收对象中:  22% (514/2286), 2.59 MiB | 451.00 KiB/s
处理 delta 中: 100% (1364/1364), 完成.
检查连接... 完成。
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ ls
back  landscape
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ tree -L 2
.
├── back
│   ├── _config.yml
│   ├── languages
│   ├── layout
│   ├── package.json
│   ├── README.md
│   └── source
└── landscape
    ├── _config.yml
    ├── Gruntfile.js
    ├── languages
    ├── layout
    ├── LICENSE
    ├── package.json
    ├── README.md
    ├── scripts
    └── source

9 directories, 8 files
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$

接下来我们看看如何配置这套主题,先回到上级目录,打开_config.yml这个配置文件,我喜欢用vim打开,你用记事本什么的打开都可以.定位到66行,将theme对应的主题名字改成你新下载下来的主题。然后 hexo cl, hexo g, hexo s在启动起来看看,是不是还是我的主题漂亮呢

momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ cd ..
momin@MrRobot:/cygdrive/d/blog/hexo-study$ vim _config.yml
    。。。。。。
 51 # Date / Time format
 52 ## Hexo uses Moment.js to parse and display date
 53 ## You can customize the date format as defined in
 54 ## http://momentjs.com/docs/#/displaying/format/
 55 date_format: YYYY-MM-DD
 56 time_format: HH:mm:ss
 57
 58 # Pagination
 59 ## Set per_page to 0 to disable pagination
 60 per_page: 10
 61 pagination_dir: page
 62
 63 # Extensions
 64 ## Plugins: https://hexo.io/plugins/
 65 ## Themes: https://hexo.io/themes/
 66 theme: back
 67
 68 # Deployment
 69 ## Docs: https://hexo.io/docs/deployment.html
 70 deploy:
 71   type:
:wq

后记

可以将你的博客文件夹和主题文件夹也纳入git中,这样以后如果有修改也好有个记录,恢复的时候也方便

momin@MrRobot:/cygdrive/d/blog/hexo-study$ git init
初始化空的 Git 仓库于 /cygdrive/d/blog/hexo-study/.git/
momin@MrRobot:/cygdrive/d/blog/hexo-study$ ll
总用量 126
drwxrwxr-x+ 1 momin momin     0 4月  22 00:08 ./
drwxrwx---+ 1 momin momin     0 4月  21 23:43 ../
drwxrwxr-x+ 1 momin momin     0 4月  22 00:08 .git/
-rw-rw-r--+ 1 momin momin   110 4月  22 00:07 .gitignore
-rw-rw-r--+ 1 momin momin  1478 4月  21 23:58 _config.yml
-rwxrwxr-x+ 1 momin momin 28049 4月  21 23:59 db.json*
drwxrwxr-x+ 1 momin momin     0 4月  21 23:44 node_modules/
-rw-rw-r--+ 1 momin momin   448 4月  21 23:45 package.json
drwxrwxr-x+ 1 momin momin     0 4月  21 23:59 public/
drwxrwxr-x+ 1 momin momin     0 4月  21 23:43 scaffolds/
drwxrwxr-x+ 1 momin momin     0 4月  21 23:43 source/
drwxrwxr-x+ 1 momin momin     0 4月  21 23:55 themes/
momin@MrRobot:/cygdrive/d/blog/hexo-study$
momin@MrRobot:/cygdrive/d/blog/hexo-study$ git stt
位于分支 master

初始提交

未跟踪的文件:
  (使用 "git add <文件>..." 以包含要提交的内容)

        scaffolds/
        source/

提交为空,但是存在尚未跟踪的文件(使用 "git add" 建立跟踪)
momin@MrRobot:/cygdrive/d/blog/hexo-study$


momin@MrRobot:/cygdrive/d/blog/hexo-study$ git stt
位于分支 master

初始提交

未跟踪的文件:
  (使用 "git add <文件>..." 以包含要提交的内容)

        scaffolds/
        source/

提交为空,但是存在尚未跟踪的文件(使用 "git add" 建立跟踪)
momin@MrRobot:/cygdrive/d/blog/hexo-study$ git add .
momin@MrRobot:/cygdrive/d/blog/hexo-study$ git stt
位于分支 master

初始提交

要提交的变更:
  (使用 "git rm --cached <文件>..." 以取消暂存)

        新文件:   scaffolds/draft.md
        新文件:   scaffolds/page.md
        新文件:   scaffolds/post.md
        新文件:   source/_posts/hello-world.md

momin@MrRobot:/cygdrive/d/blog/hexo-study$ git commit -m "新建博客,将博客纳入git管理工具"
[master(根提交) 0399ae8] 新建博客,将博客纳入git管理工具
 4 files changed, 51 insertions(+)
 create mode 100644 scaffolds/draft.md
 create mode 100644 scaffolds/page.md
 create mode 100644 scaffolds/post.md
 create mode 100644 source/_posts/hello-world.md
momin@MrRobot:/cygdrive/d/blog/hexo-study$

s


纳入git管理.PNG

好了现在博客在本地建立成功了,我们怎么把它部署到github上并让别人访问到他呢?首先我们需要安装两个插件

cnpm install hexo -server --save
cnpm install hexo-deployer-git --save

安装成功后等待后续操作

然后打开站点的配置文件。定位到最后一行

deploy:
  type: git (写git ,我也不知道为什么,拿来主义)
  repo: git@github.com:chen-shang/chen-shang.github.io.git(写你自己github项目地址)
  branch: master(提交的分支)

<p style="color:red">首先你要在github上新建一个项目,项目的命名是有规范的git@github.com:+github账户名/+github账户名+.github.io</p>

然后执行hexo d 就可以将博客推送到github上去了。这之后就可以在浏览器中输入你的项目名就可以访问你的博客了。是不是很简单那,以后有了修改只需要运行hexo d就可以提交,过一会再访问就可以看到修改了

最后记

momin@MrRobot:/cygdrive/d/blog/hexo-study$ npm install hexo-asset-image --save
hexo-site@0.0.0 D:\blog\hexo-study
`-- hexo-asset-image@0.0.2
  `-- cheerio@0.19.0
    +-- css-select@1.0.0
    | +-- css-what@1.0.0
    | `-- domutils@1.4.3
    `-- lodash@3.10.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11
momin@MrRobot:/cygdrive/d/blog/hexo-study$

想要知道上面是干什么,敬请关注下一篇博客,hexo关于本地显示图片问题的解决方案。

彩蛋

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

推荐阅读更多精彩内容