hexo+github博客搭建与备份教程(详细篇)

来自肥宅的小乐趣,带你玩转hexo自建博客,生活还是需要装一下的嘛:)。

About Hexo

官网:https://hexo.io/zh-cn/

关于hexo,如官网的一句话介绍,

Hexo 是一个快速、简洁且高效的博客框架。

  • hexo是基于node.js制作的一个博客工具,利用markdown编写文章,hexo生成静态html页面,最后将生成的html上传到我们自己的服务器。

  • hexo提供了多种样式的主题,这也是吸引众多热爱DIY的小伙伴的地方,再也不用拘泥于统一制式了。

github+hexo

正如上面的介绍,hexo会在本地生成一个静态html页面,为了让别人看到我们的博客,我们就需要将其推到远端--服务器。

那么github就提供给我们一个免费的仓库,对于新人练手是再好不过了。当然,也可以购买属于自己的域名,让更多的朋友看到你的博客。话不多说,让我们开始吧!(作者使用的是mac os系统,其他系统也类似)


环境搭建

1.安装node.js

mac用户推荐使用Homebrew

  • 安装Homebrew
    Homebrew是一款Mac OS平台下的软件包管理工具,类似于ubuntu的apt-get。如没安装的请先安装,打开终端,输入
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 安装node.js
$ brew install node
  • 查看是否安装成功
$ node -v

笔者安装的版本为v12.6.0

2.安装Git

$ brew install git

3.安装cnpm

安装hexo需要依赖node.js的npm的包管理器,由于国内镜像源速度很慢,为了避免出错,所以在使用之前一般是利用npm来安装cnpm,cnpm为淘宝的镜像源。

$ npm install -g cnpm --registry-https://registry.npm.taobao.org

hexo博客框架搭建

  • 一切就绪,准备安装hexo
$ cnpm install -g hexo-cli
  • 检查版本
$ hexo -v
  • 创建存放博客的文件夹
$ mkdir myblog && cd myblog
  • 生成博客
$ hexo init

至此,我们hexo的博客搭建初步完成了。INFO Start blogging with Hexo!

  • 启动博客
$ hexo s
  • 在浏览器地址栏处输入:https://localhost:4000就可以看到博客的雏形了。(ctrl+C关闭博客)

部署至Github

  1. 创建新仓库(没有github账号的请先注册)Creat new repository,
    地址填写格式:username.github.io,注:"username"必须与你的github账号的ID一致。


    2.配置SSH Key
    SSH Key被认为是一种更安全的登陆方式,在每次更新博客时无需输入用户名和密码,更加方便、快捷、安全。
  • 查看本机是否存在SSH密钥
    打开终端(home目录下),输入
$ cd .ssh

若不存在,请进行下一步(存在,请跳过创建步骤)

  • 创建SSH Key
    your_email@example.com填写你的邮箱地址
$ ssh-keygen -t rsa -C "your_email@example.com"

输入后按回车,然后会提示输入密码,可以按回车设为空。之后SSH就生成了,下图所示:


3.在Github中添加密钥
以文本形式打开.ssh中的id_rsa.pub文件,复制内容,接着登陆Github,点击右上角头像Setting->SSH and GPG keys->New SSH key->粘贴Key(Title任意填写)->Add SSH key 没问题,Bingo!

4.检验SSH Key

$ ssh -T git@github.com

执行yes,若出现下例,则表示配置成功。

Hi codehory! You've successfully authenticated, but GitHub does not provide shell access.

5.设置用户信息

$ git config --global user.name "codehory"//自己喜欢的用户名(非github用户名)
$ git config --global user.email  "codehory@gmail.com"//填写自己的邮箱

6.本地博客部署至Github
终端myblog目录下,使用vim打开_config.yml,

$ vim _config.yml

滑动至最底部,如图,编辑 deploy节点,
type: git
repo: git@github.com:codehory/codehory.github.io.git
branch: master
注:1.冒号后有空格 2.repo一行为新建仓库的SSH地址,打开新建仓库就能看见

输入完毕,按esc,:wq保存退出。

7.安装部署插件
myblog目录下,

$ cnpm install hexo-deployer-git --save

8.Deploy to Github

$ hexo clean
$ hexo g -d

至此,恭喜,完成全部部署,在网址栏输入:yourusername.github.io就能看到你的初步博客啦!(yourusername为你github用户名)


如何写一篇博客

myblog目录下,新建一篇博客,

$ hexo new "my first hexo blog"

在本地博客的source->_posts路径下看到新建的文章,是md格式的,使用markdown文本编辑器进行编辑即可。

编辑完成之后,执行以下命令,即可更新博文,

$ hexo clean
$ hexo g -d

更换主题

为了继续满足我们深入骨髓的DIY之心,换一个自己喜欢的主题也是必不可少的环节。Github上有很多眼花缭乱的主题,去选一个自己喜欢的吧!https://hexo.io/themes/
本文例程使用的是: https://github.com/litten/hexo-theme-yilia

  • myblog目录下,下载我们喜欢的主题至themes下,
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
  • 配置通用文件

myblog目录下,用vim打开_config.yml,

$ vim _config.yml

可以修改title,subtitle,description,keywords,author等内容,这些属性依赖于你选择的主题。


添加对应的主题,theme:对应主题名

输入完毕,按esc,:wq保存退出。

  • 配置主题文件
    ./themes/yilia目录下,用vim打开_config.yml文件(这是每个主题对应的配置文件),
$ vim _config.yml

menu用来设置你博客的分类,标签等。

subnav为你的社交媒体的链接,如github,微博等。


打赏功能可以设置打赏用语"谢谢你请我吃糖果"。插入图片设置与下面头像设置一并介绍

用github当图床
头像更换:在myblog目录下的source文件下创建img文件,将图片保存在其中。我们通过部署生成,把图片放到github上,通过链接找到。
例如:本文将一张timg.jpeg的图片存放到myblog/source/img/下,那么我们可以通过之前生成的链接,如https://codehory.github.io/img/timg.jpeg,进行图片的插入。

还有许多诸如此类的设置,各自进去修改吧,同样的操作,保存退出。

  • 上传更新
    配置完毕,我们需要重新生成博客,并将博客更新到远端。
$ hexo clean
$ hexo g -d

最后来看看我们的博客吧,还不错吧:



备份博客

由于博客是在本地生成的,如果更换电脑,那我们是不是就不能用这个博客了?方法总比问题多,我们可以利用github来备份博客的文件和数据。

  • 创建版本库
    myblog目录下,
$ git init
  • 在Github上新建仓库
    新建一个仓库,将Repository name取为blog.git
  • 链接仓库
    链接仓库地址:git@github.com:yourusername/blog.git(yourusername为你github用户名)
$ git remote add origin git@github.com:codehory/blog.git
  • 添加备份文件
$ git add source/ themes/ _config.yml scaffolds/ package.json .gitignore
  • 注释备份内容
$ git commit -m "博客备份"
  • 第一次强制上传文件到github仓库
$ git push -u origin master

第一次备份完毕,以后的备份,只需进行如下操作:

$ git push origin master

这样备份完毕后,我们在另一台电脑上,只需git clone一下就行了。

结语

说长不长,说短不短,一通操作下来,不知你是否成功了呢?作者只是抛砖引玉,带你入门,之后的进阶过程,还望各位继续探索,玩转hexo。欢迎在评论区展示下你们的成果咯,让作者也学习学习,哈哈。同样,如若有任何纰漏或者相关问题,请在评论区留言吧!感谢各位观看!See you~

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

推荐阅读更多精彩内容