使用Hexo在github上搭建个人博客

最近正好在学习前端开发,想着搭建一个属于自己的个人博客,把自己的技能树整理整理,温故而知新。

如果你有前端开发经验,那么搭建这样的博客就很简单了。

一 什么是Hexo

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

    就是说,你不需要自己从头到尾写一个个人博客的网站出来,该框架已经帮你写好了,你只需要配置一下风格,填充内容,再部署到服务器让别人能访问就行了。

二 为什么部署到github

    GIthub Pages则是github上的一项功能,可以放置网页文件到指定文件夹,然后给你一个专属域名用于展示一些项目,但现在大多用来开发制作个人博客网站。

环境配置

Hexo官网上本就有对Hexo安装及使用的详细介绍,墙裂推荐。这里来讲述自己安装的亲身步骤,或有区别。

1.Node.js

用来生成静态页面。移步Node.js官网,下载v5.5.0 Stable 一路安装即可。

2.Git

用来将本地Hexo内容提交到Github上。Xcode自带Git,这里不再赘述。如果没有Xcode可以参考Hexo官网上的安装方法。

安装Hexo

当Node.js和Git都安装好后就可以正式安装Hexo了,终端执行如下命令:

sudo npm install -g hexo

输入管理员密码(Mac登录密码)即开始安装(sudo:linux系统管理指令 -g:全局安装)

注意坑一:Hexo官网上的安装命令是$ npm install -g hexo-cli,安装时不要忘记前面加上sudo,否则会因为权限问题报错。

初始化

终端cd到一个你选定的目录,执行hexo init命令:

hexo init blog

blog是你建立的文件夹名称。cd到blog文件夹下,执行如下命令,安装npm:

npm install

执行如下命令,开启hexo服务器:

hexo s

此时,浏览器中打开网址http://localhost:4000,能看到效果。

本地设置好后,接下来开始关联Github。

关联Github:

创建仓库

登录你的Github帐号,新建仓库,名为用户名.github.io固定写法,如wangdachui.github.io即下图中1所示:

本地的blog文件夹下内容为:

_config.yml    

  db.json 

  node_modules 

  package.json

  scaffolds

  source

  themes

打开_config.yml,打开后往下滑到最后,修改成下边的样子:

deploy:

    type: git

    repository: https://github.com/gonghonglou/wangdachui.github.io.git

    branch: master

你需要将repository后wangdachui换成你自己的用户名。hexo 3.1.1版本后type:值为git

注意坑二:在配置所有的_config.yml文件时(包括theme中的),在所有的冒号:后边都要加一个空格,否则执行hexo命令会报错,切记 切记

blog文件夹目录下执行生成静态页面命令:

 hexo generate        或者:hexo g
此时若出现如下报错:
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
则执行命令:
npm install hexo --save
若无报错,自行忽略此步骤。

再执行配置命令:

 hexo deploy                  或者:hexo d

注意坑三:若执行命令hexo deploy仍然报错:无法连接git或找不到git,则执行如下命令来安装hexo-deployer-git

$ npm install hexo-deployer-git --save      

再次执行hexo generatehexo deploy命令。

若你未关联Github,则执行hexo deploy命令时终端会提示你输入Github的用户名和密码,即

Username for 'https://github.com':

Password for 'https://github.com':

hexo deploy命令执行成功后,浏览器中打开网址http://wangdachui.github.io(将wangdachui换成你的用户名)能看到和打开http://localhost:4000时一样的页面。

为避免每次输入Github用户名和密码的麻烦,可添加SSH Key到Github

发布文章

终端cd到blog文件夹下,执行如下命令新建文章:

$ hexo new "postName"

名为postName.md的文件会建在目录/blog/source/_posts下,postName是文件名,为方便链接不建议掺杂汉字。你当然可以用vim来编辑文章。我在用Mou编辑器,支持预览,虽然其预览主题并非我喜欢,如果你有好用的markdown编辑器请推荐给我,感激不尽!

文章编辑完成后,终端cd到blog文件夹下,执行如下命令来发布:

hexo generate                  //生成静态页面
hexo deploy                    //将文章部署到Github

安装theme

你可以到Hexo官网主题页去搜寻自己喜欢的theme。这里以hexo-theme-next为例

终端cd到 blog目录下执行如下命令:

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

blog目录下_config.ymltheme的名称landscape修改为next

终端cd到blog目录下执行如下命令(每次部署文章的步骤):

$ hexo clean           //清除缓存文件 (db.json) 和已生成的静态文件 (public)

$ hexo g               //生成缓存和静态文件

至于更改theme内容比如名称、描述、头像等去修改blog/_config.yml文件和blog/themes/next/_config.yml文件中对应的属性名称即可, 不要忘记冒号:后加空格。 NexT 使用文档里有极详细的介绍。

主题下会有更详细的自定义教程,这里就不展开了。欢迎关注我的技术博客:https://wangdachui.github.io

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【Golang语言社区】前端编程-手机端调试利器 - 总结与实践

一些调试工具 说起手机端调试,相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以...

4754
来自专栏安恒网络空间安全讲武堂

zzcms 8.3 最新CVE漏洞分析

上次我们分析了一下zzcms 8.2版本的一些漏洞,但是很快8.3版本就推出更新了,但是在更新不久,就有新的漏洞爆了出来,那就跟随大师傅们的脚步学习一下。有关8...

2593
来自专栏向治洪

hexo常用命令

Hexo 约有二十个命令,但普通用户经常使用的只有下列几个: hexo s hexo s是hexo server的缩写,命令效果一致;启动本地服务器,用于预览主...

21010
来自专栏有趣的Python

16 -Flask构建弹幕微电影网站- 会员模块实现会员模块实现

本章内容: 会员模块实现 已上线演示地址: http://movie.mtianyan.cn 项目源码地址:https://github.com/mtia...

4337
来自专栏程序生活

搭建个人博客-hexo+github详细完整步骤一、第一步:下载安装Git二、第二步:下载安装node.js三、第三步:安装hexo四、第四步:初始化Hexo五、部署到Github上六、最后加上一些文

自己也算是摸爬滚打搭建成功,然后自己再重新安装部署一遍,把完整步骤分享给大家,同时最后有一些连接,如果我的步骤不行,大家可以参考其他人的(这个有点花费时间,大家...

3075
来自专栏向治洪

Android Studio环境下搭建ReactNative

1.安装Android Studio 首先肯定是 安装Android Studio(包含SDK)(国内推荐) ps:这里有一点要注意,需要为SDK配置环境变量,...

2008
来自专栏木头编程 - moTzxx

WDCP 初次见面/打个招呼

1011
来自专栏happyJared

Hexo整合GitHub Pages

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

1892
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件 在《Vue2+VueRouter2+Webpack...

2185
来自专栏前端知识分享

第150天:网页中插入百度地图方法(需要密钥)

像这样的地图,我们可以通过手动来进行放大、缩小、移动等来查找具体的地址,特别方便,在页面上引用也显得页面很有特点,那么,应该怎么样来制作这种地图呢?

1474

扫码关注云+社区

领取腾讯云代金券