HEXO搭建个人博客章

最近在无意中在网上看见个很不错的网页博客,少见,在网上一查是GitHub Page + HEXO搭建的个人博客。作为一个攻城狮,见到如此,必须自己也搞出来试试。查找一些网上的资料和填坑,不就一个个人的技术博客必须诞生啦。大家或许搭建的时候仅花个几分钟,但在主题优化上可能就会占用你一天甚至两天的时间,优化好后就快了。只管码MD了。我的博客效果https://cl9000.github.io

why do myself Blog?

  1. 写技术博对自己技术经验的总结。
  2. 可以提升自己的表述能力,光会做 ?不会说怎么可以,那你只有被别人利用的价值了。
  3. 对自己以后的升值夹心肯定的,例如面试的时候可以抛出来你的链接,瞅瞅这,哈哈。
  4. 。。。无量好处。。。

个人博客 - Mark - 搭建开始


wo选择的是GitHubPage + Hexo,一种简单高效的构建方式。
当然还有其他的实现方式,如:WorkPress、GitHubPage + Jekell等等。

配置必要环境

安装Node.js

** ? : 用到nodejs的包管理器 npm **

git(Xcode自带)

** ? : 或借助三方软件,如SourceTree,SVN **

GitHub申请个账号,作为程序员必须的

** ? : 用来做博客的远程仓库、调整域名、源码的服务器的,怎么与本地hexo建立连接下面讲。SSH Keys,可以不配,不配的话以后每次对自己的博客有改动部署的时候就要手动输入账号密码,配置了就不需要了,怎么配置网上有很多教程
**

安装HEXO

  1. 打开终端中输入:

    $ sudo npm install -g hexo

  2. 安装完成, 执行Hexo 命令,** 初始化本地博客仓库** 两种创建方式。如下

    • 创建一个文件夹,如:myblog,cd到myblog里执行命令:

      $hexo init

    • cd 到 desktop(or 你想去的地方~) 也可以直接

      $ hexo init mybolg

  3. ** 生成静态网页**
    $ hexo genrate 或 hexo g

  4. ** 本地预览 ** 在终端中 cd 到你的本地博客仓库(就是myblog文件夹,我怕我看不懂,hahaha~)执行:

    $ hexo s

上述步骤完成。 博客的基本框架就基本构建完成,简单吧! hahaha~, 坑不在这。。。
Hexo 默认的博客主题是landscape主题,后面介绍怎么更换主题及链接Github。下面来试下本地的博客预览效果

终端命令图

执行完 hexo server ,在浏览器上输入网址:http://localhost:4000/ 或 http://0.0.0.0:4000/ ,就能预览到landscape主题下的博客效果,具体如图:

在这简单描述下初始化后的目录结构:

  • _config.yml ——是博客主要配置文件
  • db.json——是博客数据库
  • node_modules——是NodeJS依赖模块
  • public ——静态网页存放的地方,执行一次hexo clean,此文件夹会被清除, hexo g 会再次生成
  • source——是博客内容以及其他页面(page)存在的目录,这个目录里面有个_post目录就是我们存放博客内容的地方,也就是存放博客内容markdown文档地方,输入hexo new “newPage”就会在这个目录建立一个名为newPage的子目录,然后在里面放入md文档,并在主题的配置文件里面添加相应栏目* newPage,这样就会显示在主页面的目录上。(将在后续有所mark)
  • themes——是主题存放文件
常见的HEXO配置错误:
ERROR Plugin load failed: hexo-server

原因: Besides, utilities are separated into a standalone module.
 hexo.util is not reachable anymore.

解决方法,执行命令:$ sudo npm install hexo-server

执行命令hexo server,提示:Usage: hexo<Command> ....

原因:我认为是没有生成本地服务

解决方法,执行命令:$ npm install hexo-server --save

提示:hexo-server@0.1.2 node_modules/hexo-server
.... 

表示成功了[参考](https://hexo.io/zh-cn/docs/server.html)

这个时候再执行:$ hexo-server

得到: INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
这个时候再点击http://0.0.0.0:4000/, 正常情况下应该是最原始的画面,如果出现是: 白板和Cannot GET /
原因: 由于2.6以后就更新了,我们需要手动配置些东西,我们需要依次下面三行命令:

$ npm install hexo-renderer-ejs --save
$ npm install hexo-renderer-stylus --save
$ npm install hexo-renderer-marked --save

这个时候再重新生成静态文件,命令:
$ hexo generate (或hexo g)

启动本地服务器:
$ hexo server (或hexo s)

再点击网址http://0.0.0.0:4000 OK终于可以看到属于你自己的blog啦!!!参考链接,至此,本地的blog设置已经完成,但是现在域名和服务器都是基于自己本地的电脑,接下来需要跟Github page进行关联,


配置Github page

登录或者注册
有Github账号的直接 + 库,没有的注册个再 + 呗



填写仓库名称:注意 Respository name 中一定要输入:你的用户名.github.io,然后点击”Create repository“ 按钮完成创建即可。
不是用户名.github.io,最终的后果是显示404页面。故,在这略微留意一下。具体如下图所示:


以上要注意

创建好库,下面打开本地建好的本地博客仓库myBlog,目录如下:

myBlog
 |
 |-- _config.yml
 |-- node_modules
 |-- public
 |-- source
 |-- db.json
 |-- package.json
 |-- scaffolds
 |-- themes

现在我们需要_config.yml文件,来建立与GitHub关联,命令:
$ vim _config.yml
翻到最下面,改成我这样子的,注意:** : 后面要有空格**

deploy:
  type: git
  repository: https://github.com/cl9000/cl9000.github.io.git
  branch: master

改完后 esc + :wq 保存退出或者用文本编辑器更改

执行如下命令才能使用git部署:

npm install hexo-deployer-git --save

网上会有很多说法,有的type是github, 还有repository 最后面的后缀也不一样,是github.com.git,我也踩了很多坑,我现在的版本是hexo: 3.2.2,执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。 忘了说了,我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了,总共就两种协议,相信你懂的。
然后,执行部署命令:
$ hexo deploy
 然后再浏览器中输入http://cl9000.github.io/就行了,我的 github 的账户叫 cl9000 ,把这个改成你 github 的账户名就行了,就可以访问了

部署步骤:

每次部署的步骤,可按以下三步来进行。

$ hexo clean        清理缓存干掉public
$ hexo generate     重新生成静态文件
$ hexo deploy       部署到Github
一些常用 hexo 命令:
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
$ hexo generate #生成静态页面至public目录
$ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
$ hexo deploy #将.deploy目录部署到GitHub
$ hexo help  #查看帮助
$ hexo version  #查看Hexo的版本

这是Github上的,主题列表github上都有详细介绍,自己研究吧

一些基本修改路径
  • 文章在 source/_posts,编辑器可以用 Sublime、Mweb,支持 markdown 语法。
  • 如果想修改头像可以直接在主题的 _config.yml 文件里面修改,友情链接、分享、评论等的都在这。
  • 修改站名在 public/index.html 里修改。

开始打理你的博客吧,有什么问题或者建议,都可以提出来,我会继续完善的。

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

推荐阅读更多精彩内容