Hexo博客搭建四步曲

一、准备工作

1.1下载安装以下文件:node.js/GitForWindows/npm

Ø node.js(最新版本的node.js已经集成了npm模块,无需单独安装)

(1)下载链接:https://nodejs.org/en/download
(2)安装教程:http://www.cnblogs.com/zhouyu2017/p/6485265.html

Ø Git For Windows(版本控制软件)

下载链接:https://git-for-windows.github.io/
安装教程:https://www.cnblogs.com/vitah/p/3612473.html
1.2注册GitHub(类似于服务器,用来部署你的项目):
注册链接:https://github.com/
使用教程:https://www.cnblogs.com/zfanlong1314/p/3715490.htm
1.3安装Hexo:

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具

(1)使用Git Bash执行以下命令(鼠标右键可找到git bash):$ npm install -g hexo
(2)初始化Hexo(先在本地新建hexo文件夹,然后在此文件夹内右键“git bash”),执行以下代码:$ hexo init
(3)执行以下代码后,通过localhost:4000网址查看你自己的网页效果:先$ hexo g,再$ hexo s

目录说明:


image.png
1.4注册简书:

作为博客文章内容中图片所对应的图片服务器,与.md文件语法相关

注册链接://www.greatytc.com/
使用:直接将图片拖拽至文章正文,便生成了图片路径,在编写博客正文时可直接调用。

二、环境配置

2.1创建github仓库:

(1)新建一个名为你的用户名.github.io的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io。每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库;
(2)注意事项:

a.注册的邮箱一定要验证,否则不会成功;
b.仓库名字必须是:username.github.io,其中username是你的用户名;
c.仓库创建成功不会立即生效,需要过一段时间,大概10-30分钟,或者更久,我的等了半个小时才生
效;

注:创建成功后,默认会在你这个仓库里生成一些示例页面,以后你的网站所有代码都是放在这个仓库里啦。

2.2搭桥到github:

(1)回到gitbash中,配置github账户信息(YourName和YourEail都替换成你自己的):

$ git config --global user.name "liuxianan"// 你的github用户名,非昵称
$ git config --global user.email  "[xxx@qq.com](mailto:xxx@qq.com)"// 填写你的github注册邮箱

(2)配置SSH-key
为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。
用git bash执行如下命令:

$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:


image.png

将刚复制的内容粘贴到key那里,title随便填,保存。

2.3域名绑定:

看个人需求,域名也很便宜,3-6块,活动时1块一年。如果不想绑定域名,就用默认的 xxx.github.io 来访问,如果想个性一点,可以考虑入手一个域名。具体的域名绑定配置请参考以下博客,再次不做过多讲述:

域名绑定网址:https://blog.csdn.net/wgshun616/article/details/81019739

三、装饰博客

不同的人,对自身博客主题风格的要求都不一样,所以在基础博客框架搭建成功后,接下来就是对博客整体进行布局调整,将现有的博客风格改装成自己想要的主题风格。页面的排版布局、颜色色调、网站图标、新增内容等等,这些都是可以在原始主题风格下进行修改的,改主题内部布局文件即可。

3.1博客主题:

选主题链接:https://www.zhihu.com/question/24422335
修改主题:
(1)下载主题:进入hexo/theme下,打开git bash窗口,从上面选取的主题仓库,下载主题:

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

(2)配置主题:修改_config.yml中的theme: landscape改为theme: yilia,然后重新执行hexo g来重新生成。如果出现一些莫名其妙的问题,可以先执行hexo clean来清理一下public的内容,然后再来重新生成和发
布。

3.2添加相关主题插件(根据个人所需):

日历插件:http://note.youdao.com/noteshare?id=80986bdd81eefe233016ebfecf6e295a&sub=FADE2DB590FD480190B297CA8F807C7C
订阅插件:http://blog.csdn.net/u011303443/article/details/52333695
统计插件:https://crane-yuan.github.io/2016/03/25/Hexo-05-add-site-statistics/
音乐插件:http://blog.csdn.net/u013384788/article/details/74079890)
注:插件较多,根据个人需求进行添加,在此不做过多说明,网上教程较多。

3.3修改主题布局色调:

参看以下链接:http://www.javait.club/2017/11/16/HexoArticleStyle/

四、写博客(MarkDown)

4.1写博客的工具:

在线的:http://mahua.jser.me/
本地的:markdown编辑器
在线和本地均可:有道云和简书都可以
案例:

image.png

4.2Markdown语法:

参考链接://www.greatytc.com/p/191d1e21f7ed

4.3Hexo常用命令:
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

用的最多的就是:hexo g(编译)、hexo d(部署到github)。

4.4Hexo发布博客流程:
(1)进入博客文件目录,创建.md博客文件,按照markdown语法进行编写;(博客文件目录:hexo/source/_posts)
(2)编译并发布博客:在当前目录下,右键git bash,然后依次执行编译(hexo g)和部署(hexo d),发布以完成的博客到git hub。
(3)访问自己的博客网址:www.javait.club

最终效果图:


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

推荐阅读更多精彩内容