hexo + github 实现搭建个人博客

花了一上午的时间,终于弄明白了怎么用hexo搭建博客,现在记录下来,以供以后参考。

一、注册github账号

1、官网注册

Paste_Image.png

上面三栏分别填入用户名,邮箱和密码。(这三个东西对于后面的使用是非常重要的,最好能记住)。

2、创建仓库

现在我们登陆github,单击头像右边的加号,点击repository。


Paste_Image.png

然后在repository name中输入github用户名.github.io ,点击create repository
因为我已经创造好了所以他是红的,第一次弄的应该是原谅色的

Paste_Image.png

之后我们先把github一放,来看看下一步。

二、安装所需环境

我们需要两个东西,一个是node.js,另一个是git请自行百度搜索下载 下载完成安装时一路next就好了。

我们之后的大部分工作都是在我们安装的git中的git bash进行的(我们把它称之为终端(Terminal))。

那我们现在就来使用一下这个终端

1、生成添加秘钥

在终端输入 ssh-keygen -t rsa -C "Github的注册邮箱地址" (注意:有引号) 然后他会让你输入一些东西,我们不用管他,直接一直enter,待秘钥生成完毕,会得到两个文件id_rsaid_rsa.pub,他会提示文件所在的目录,用带格式的记事本打开id_rsa.pub,ctrl + a ctrl + c复制里面的所有内容,带着他们再回到我们的github,再单击你的头像,点击下面的settings

Paste_Image.png

左边找到SSH and GPG keys,再点击New SSH key
Paste_Image.png

Title随便填,下面的Key就直接ctrl + v 把我们复制的东西统统粘贴进去,再点击Add SSH key就完成了。

git bash中输入命令$ssh -T git@github.com,选yes,等待片刻可看到成功提示。

2、安装hexo

接下来我们所有的操作都在终端进行。

  • 新建一个你自己的hexo文件夹
    文件夹我们就按照常规的方法新建就好了,建好后在终端上输入
    $ cd 文件夹的路径
    注意:这里的文件夹的路径是不加引号的
    这样我们就在git上成功定位了它工作的位置。
    强调:强烈建议不要选择需要管理员权限才能创建文件(夹)的文件夹。

  • 在此文件夹下安装hexo
    $ npm install -g hexo-cli
    运行完这条语句再在终端输入
    $ hexo

Paste_Image.png

如果显示为这样就说明已经安装好了。

  • 初始化博客
    $ hexo init <folder>
    <folder>为文件夹的路径
    $ cd <folder>
    进入博客文件夹,<folder>为文件夹的路径
    $ npm install
    node.js的命令,根据博客既定的dependencies配置安装所有的依赖包

初始化博客后 我们的文件夹中的文件是这样的:

Paste_Image.png
  • 配置个人信息
    基于上一步,我们对博客修改相应的配置,我们用到_config.yml文件,用记事本打开,我们会看到一大堆东西,但我们只需要修改其中的一部分就好了:

1. 修改网站相关信息

title: # The title of your website网站标题
subtitle: # The subtitle of your website子标题
description: # The description of your website网站的描述
author: # Your name你的名字
language: zh-CN中文
timezone: Asia/Shanghai上海时间

languagetimezone都是有输入规范的,详细可参考语言规范时区规范
注意:每一项的填写,其后面都要保留一个空格,下同。

2. 配置统一资源定位符(个人域名)
url: http://yourwebsite.com

对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。

3. 配置部署(个人感觉最重要)

deploy:
  type: git 
  repo: https://github.com/sukixj/sukixj.github.io.git 
  branch: master

其中repo可以在github中你创造的仓库中找到

Paste_Image.png

branch是项目的分支,我们默认用主分支master
执行$npm install hexo-deployer-git --save
你需要为自己配置身份信息,打开命令行,然后输入:
$git config --global user.name "your github name"
$git config --global user.email "your github email"

  • 至此我们的所有配置都搞完了

ps:如有卡住的地方可以ctrl + c 强制退出,或者有不能继续的情况可以重新$ hexo init 文件夹或者$ hexo clear清除缓存。


发表文章

支持文章格式为markdown(.md)

在终端执行
$hexo n "文章标题" 或 $hexo new "文章标题"

我们可以在本地博客文件夹source->_post文件夹下看到我们新建的markdown文件,用Markdown编辑器打开文件并编辑保存。我们就可以进行本地生成博客,执行
$hexo g 或 $hexo generate
然后执行
$hexo s 或 $hexo server
就可以在浏览器进入 localhost:4000 进行本地预览

但是毕竟我们目前发布的只有本机看得到,怎么让其他人看到我们写的博客呢?这时候我们来看看博客的部署。

我们只要在生成后终端执行这样的命令即可:
$hexo d 或 hexo deploy
或者可以直接
$hexo g -d
输入你的github用户名和密码,(密码默认不显示),然后就好啦~


更换主题

作为自己搭建的blog,怎么能没有一款逼格++的主题呢?
hexo有着各种各样的主题,均可以在github下载。
比如我们看上一款主题Next,我们就在终端cd 工作目录/themes,定位到主题文件夹,再执行
$git clone https://github.com/iissnan/hexo-theme-next.git
git bash就会自动为我们下载好这款主题(其他主题同理)

下载完成之后我们找到主文件夹下的_config.yml,用记事本打开它,然后找到theme,把冒号后面的主题名称相应的换成我们下载的主题名称(主题名称即我们下载完主题后文件夹的名称),保存。

Paste_Image.png
(此处主题应为Next)

在更换主题这方面还有一点注意需要说:因为有的主题设置为UTF-8编码,所以我们需要根据主题来相应的更改主文件夹下的_config.yml的编码和我们需要发布的文章文件的编码(如何更改文件编码?)(默认为ANSI),如不更改,可能会出现博客内中文乱码现象 (调了半天才知道为什么)。

保存后我们在终端执行$hexo g -d就好啦~~

可能你会不满足于主题自带的背景图片或者其他,在每个github下载页面下方都有README说明,我们可以根据它来自定义自己喜欢的元素。


域名绑定

购买域名

一个高逼格的博客怎么能够少了域名呢ovo。域名提供商有很多,像godaddy、万网等。如果是学生党的话推荐使用腾讯云1元云主机+域名”计划。

绑定域名

这里以在腾讯云购买的域名为例。

  1. 进入腾讯云后台域名管理,点击解析域名
  2. 添加DNS记录:

    【注:腾讯云中DNS记录生效需要十分钟,请耐心等待】
  3. 在博客根目录里的source目录中新建CNAME文本文件(不带任何后缀!!!),然后用Notepad++编辑CNAME文件,写入你的域名,保存退出
  4. 重新部署一下博客(hexo clean、hexo d -g)
  5. 试试能不能通过域名访问到你的博客。

这样,我们最基础的博客就搭建完了,其实hexo还有很多扩展,只是我还不会,也有很多黑科技,也不会,这就需要我们问dalao了。

wordpress 使用php,权限更高,能搞更多东西出来。而且写东西方便,任意一台电脑、手机都可以写博客。
hexo相对更简洁点,不需要买服务器,很容易弄明白每个文件是干什么的,可以魔改出自己的hexo,通过各种方法实现自己的要求。需要有一定的git基础。不过使用比较折腾,需要node.js git 才能写博客,虽然可以制作便携版放U盘,不过还是比较麻烦不过我现在还是在用hexo,多折腾才能更多踩坑,才能提高(虽然都是在瞎搞)

END


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

推荐阅读更多精彩内容