2018最新版hexo+Github+Coding搭建个人博客教程

原文链接:Dimple's Blog

前言

现在是大三了,身边的甚多朋友技术都还不错,动不动就搭建自己的网站什么的。本着向大佬学习(zhuangbi)的心情,我也开始在阿里云上面买了一个云服务器(学生套餐9.9),使用phpstudy软件一键部署了一个web服务器。但是想想其实没什么用,我只是想找一个属于自己的个人博客而已。所以将目光转向了hexo。 经过很多的摸索,终于是做好了我的博客:http://bianxiaofeng.top, 就像每个语言入门必写hello world一样,我也想把自己使用hexo的相关经历写下来,方便自己以后查阅也希望能够帮助到更多的朋友。

博主使用是Windows10操作系统,其他系统自测。

总述

搭建的过程分为以下几步:

  1. 安装Node.js
  1. 安装Git软件
  1. 安装hexo博客框架
  1. 测试本地运行(线下访问个人博客)
  1. 部署到Coding以及GitHub上(线上访问个人博客)

安装Node.js

Node.js下载地址:https://nodejs.org/en/download/

安装过程一路默认安装即可。

详细安装文档参看:http://www.runoob.com/nodejs/nodejs-install-setup.html

安装Git软件

Git软件下载地址:https://git-scm.com/download

安装过程一路默认安装即可。

关于更多的Git讲解参看:

https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

安装Hexo

什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Hexo官方网站:https://hexo.io/zh-cn/

安装

安装命令:

npm install -g hexo-cli  #-g表示全局安装

这里提一下:关于hexo的终端操作最好是在管理员模式下,读者可以采用按住Shift然后再点击鼠标右键选择弹出菜单的在此处打开Powershell窗口保证运行在管理员状态下。

初始化hexo

在电脑合适的位置新建一个文件夹存放博客。本文中取名为Blog文件夹。

控制台命令行使用cd命令进入到Blog文件夹,输入以下命令进行初始化:

hexo init  # 初始化 

初始化完成之后,因为会出现有些依赖包未安装成功的情况,所以请再输入以下命令安装依赖包:

hexo install   # 安装依赖包  

测试本地运行

完成以上安装步骤后,便可以在本地预览博客效果了。

输入以下命令:

hexo g   # 等同于hexo generate,生成静态文件
hexo s   # 等同于hexo server,在本地服务器运行

然后打开浏览器地址栏输入:http://localhost:4000/便可以预览生成的博客框架雏形了。

部署到GitHub以及Coding上

建立博客网站肯定是要让大家看到的,由于Github是歪果仁的网站,且禁止百度爬虫访问,所以会导致百度搜不到你的网站。所以我们要做好两手准备:国内采用Coding托管,国外采用GitHub托管。

分别注册GitHub以及Coding的账号。

GitHub注册

1、在GitHub首页点击Start Project

2、创建Repository

[图片上传失败...(image-d3d42a-1516176121521)]

PS:创建时,填写Repository name的时候,Repository name的格式必须为{user_name}.github.io,其中{user_name}必须与你的用户名一样,这是GitHub Pages的特殊命名规范(亲测不区分大小写)。

Coding注册

CODING 是国内专业的一站式云端软件服务平台,成立于 2014 年 2 月,总部位于深圳,并于北京、上海、成都、西雅图设立分部,已获得了 IDG 和光速的两轮投资共计 1500 万美元。旗下自主研发运营 Coding.net 云端开发协作平台,累积 25 万开发者,37 万个项目。在云计算时代,把代码托管、产品演示、WebIDE 等开发工具集成到浏览器中,免除繁杂的开发环境部署,节省成本,帮助软件开发者提高生产效率,并实现 “Coding Anytime Anywhere” 的愿景。2015 年 10 月,基于 Coding.net 的工具平台,CODING 推出云端软件众包服务平台 “码市”,旨在通过云端协作以及众包的方式提高软件交付的效率,帮助软件开发行业实现高效的资源匹配。

Coding.net 为开发者提供了免费的基础服务,包括但不限于 Git 代码托管,项目管理,Pages 服务,代码质量管理。您可以在 Coding.net 一站完成代码及代码质量,项目及项目人员的管理,Coding.net 让开发变得前所未有的敏捷和简单。

Coding的仓库容量只有256M,但是用来发布博文是够了的。

注册步骤没啥好说的。

主要说一下创建仓库的时候(顺便说一句:Coding毕竟还是国内的,各方面比较适合国人的习惯,操作起来是比GitHub顺手点。 )

点击下面的“加号”创建一个仓库:

[图片上传失败...(image-2f492a-1516176121521)]

然后输入项目名称以及项目描述:

[图片上传失败...(image-66b18d-1516176121521)]
此处的项目名称不像GitHub那样有着严格的命名规范,你可以按照你能想象到的方式输入。建议不要输入中文,不然后面会走的很安详。这里我是输入的自己的用户名作为项目名称。

开启Pages服务(步骤如下图)

[图片上传失败...(image-eaa999-1516176121521)]
选择部署来源为master分支,然后点击 http://username.coding.me/yourRepoName就可以查看你的博客了,不过你点进去是404,因为你仓库里面啥都没有。

到此,注册和创建仓库一步骤已经全部完成了。

部署到线上(GitHub和Coding)

我看到很多博客上面说到配置文件的时候,没有区分站点配置文件和主题配置文件,这里我先说清楚。站点配置文件和主题配置文件名称都是一样的_config.yml,站点配置文件在网站根目录,主题配置文件在根目录下的theme文件的具体theme下的_config.yml

修改站点配置文件

打开_config.yml到最后deploy选项:
配置如下:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: https://github.com/DimpleFeng/dimplefeng.github.io.git,master
    coding: https://git.coding.net/DimpleFeng/test.git,master

注意:每个冒号后面都是有一个空格的,这是node的语法。

部署

部署之前需要安装git部署插件,否则会提示Deployer not found错误。

npm install hexo-deployer-git --save

安装完毕后控制台输入:

hexo g -d   

随后访问你的以下网址(注意替换):

yourName.github.io
yourName.coding.me

后续

接下来呢,我还会针对Next主题、相关的网站配置以及域名和百度谷歌收录进行说明,欢迎关注我的系列文章。

总结

洋洋洒洒的写了4000+字,确实每一步都是在仔仔细细的做,记录。这篇博文参考了hexo的官方文档,以及百度谷歌的各种教程,重复杂乱居多,网上各种文章都是复制粘贴重复很多且不是最新的,我只想用最平凡的文字记录最清晰的道路。我是一个被代码耽误的诗人,这是我朋友给我的评价哈哈哈。

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

推荐阅读更多精彩内容