Hexo系列1:从零开始搭建hexo博客

编程入门 行业动态 更新时间:2024-10-25 04:17:38

Hexo系列1:<a href=https://www.elefans.com/category/jswz/34/1769682.html style=从零开始搭建hexo博客"/>

Hexo系列1:从零开始搭建hexo博客

经过一番折腾,终于搭建好了自己的博客网站,结果是美好的,但过程却惨不忍睹。
作为本站的开篇之作,博主我主要想分享一些建站的想法以及一些初略的经验。欢
迎围观,欢迎吐槽。

前言


github pages是github下一个免费域名空间,可以自动生成项目或者用户的网站作为一门前沿技术,我深知学习
技术的重要性,技术的思考与学习让我产生了撰写博客的想法,之前试过iteye,反
正就是没坚持下去。直到遇到了hexo,才萌生了搭建自己的博客网站的想法。经过各种失
败,终于柳暗花明又一村。为了让后来者少走弯路,虽然网上已经有各种教程,但
总结自己失败的经历对别人还是有帮助的。这篇博客就以rhwayfun的建立过程
谈谈经验。

安装软件


1、 node.js
2、 github客户端
3、 Sublime Text 2.0


为什么选择Hexo与github pages?


  • Hexo是什么?
  • Hexo快速入门
  • github pages是什么?
  • github pages快速入门

Hexo是什么?

Hexo是一款基于Node.js的静态博客框架,运行速度超快,支持Markdown语法,
撰写文章就是那么简单。如果想详细了解Hexo,可以参考官方指南或者看
这篇文章。


Hexo快速入门


安装Hexo

在电脑任意目录创建hexo文件夹(E:\hexo),执行以下命令

cd e:\hexo
npm install -g

部署Hexo

继续在E:\hexo目录下进行操作,执行以下命令

hexo init
hexo g
hexo s

hexo init命令会在hexo文件夹生成一些初始化文件和一些配置信息
hexo g命令在hexo文件夹生成public文件夹,这个文件里面的文件是面向网站的,以后写文章创建的
文件都是在这个文件夹进行操作
hexo s会启动hexo服务,在浏览器输入localhost:4000就可以直接访问了

部署hexo遇到的问题

在执行上述命令后打开localhost:4000,页面出现的都是代码,一开始怀疑是不是自己部署hexo出问题了,
于是又重新部署Hexo,结果还是一样,眼看就要成功了却卡在这里,上网查找资料才发现,没有安装模版文件,
解决这个问题只需要使用以下命令

npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save

修改默认主题

首先需要clone新的主题到本地,我使用的是jacman的,在git shell中切换到e:\hexo,使用以下命令克隆主题到
本地:

$ git clone .git themes/jacman

然后jacman的主题就复制到了themes/jacman中。接着需要在hexo下的_config.yml中修改主题:

themes: jacman

修改之后,需要更新主题,直接执行下面的命令即可:

cd themes\jacman
git pull

启用调试

更新主题后,需要重新部署hexo,并配置hexo下的config.yml,修改配置如下

# Deployment
## Docs: .html
deploy:
type: git
repository: .github.io.git
branch: master

然后在git shell中执行以下命令(可以不切换路径)

hexo clean
hexo g
hexo s

以后每次修改文件或者themes下的_config.yml文件都要重新执行hexo ghexo s,然后打开本地预览窗口,查看修改效果。
不过现在有许多在线Markdown预览工具,简单实用,可以直接在预览工具或者Sublime Text中编写代码(在Sublime Text预览需要首先安装
MarkdownEditing插件),在网页中查看编写效果。不过当对Markdown语法熟悉之后,直接在Sublime Text中写代码是很不错的体验,之前
使用Notepad ++,后面发现Sublime Text那么强大,果断使用它了


github pages是什么?

github pages可以自动为你的项目生成一个网站模版,并且没有数量限制,类似这样:

使用github pages还能生成个人或者组织网站,相当强大。而且发布一个网站仅仅需要的只是一个github账号而已。详情可以访问这里


github pages快速入门


注册github

访问github官网,注册一个账号,并创建一个项目,比如一个公共项目rhwayfun。

配置SSH密匙

配置SSH密匙是为了本地github项目与远程建立联系,详细的配置过程请参考官方指南。

使用Github pages

配置成功后,在rhwayfun项目主页点击setting,然后点击左边的Options,下拉到Github pages,直接点那个Launch automatic page generator按钮就行。然后选择网站模版就行,等待大约几分钟,github pages就帮你生成了项目的网站,默认网址是https:username.github.io/project
如果想访问自定义的域名,请查看Github pages进阶篇


Github pages进阶篇


注册域名

访问godaddy,首先查找想要注册的域名,然后一直点击CONTINUE TO CHART就行。godaddy是国外唯一支持支付宝的域名提供商,而且godaddy性能稳定,这也是选择它的原因。支付成功后,点击My Account——>Manage My Domains,就可以看到你注册的那个域名了。

设置域名

进入域名管理页面后需要修改Nameservers,选中域名,选自定义,将Nameservers修改为f1g1ns1.dnspod和f1g1ns2.dnspod

修改DNS设置

使用DNSPod添加域名,创建两条A记录,端口号保持600不变,将IP地址分别设为github pages提供的IP:

  • 192.30.252.153
  • 192.30.252.154

Github pages的设置

在username.github.io项目根目录下创建CNAME文件,文件内容为你在godaddy购买的域名(顶级域名贵些,建议购买顶级域名),如rhwayfun

至此博客搭建完成,可以在git shell中切换到hexo文件夹,仍然执行hexo ghexo d命令,也可以使用组合命令hexo d -g。然后到浏览器中输入rhwayfun(ps:DNSPod的设置不一定立即生效,需要等待一段时间)。如出现下面的界面,恭喜你博客搭建成功,请尽情享受你的博客网站吧!

本文关于hexo框架博客网站的搭建,不是最详细的,当然如果您根据我的文章一步步折腾下来还成功的的话,说明我们都是一路人————爱折腾。或许这也是程序员的一个特质吧。文章中任何有瑕疵的地方,欢迎不吝赐教!


参考资料

1、 如何搭建一个独立博客——简明Github Pages与Hexo教程 (推荐)
2、 Jacman基于Pacman修改的Hexo主题(推荐)
3、 Markdown语法说明
4、 How do I start using LiveReload?
5、 Hexo站点中添加文章目录以及归档
6、 利用swiftype为hexo添加站内搜索
7、 Hexo
8、 Hexo优化与定制(一)(推荐)
9、 hexo你的博客(推荐)
10、 为hexo添加多说评论
11、 多说 API
12、 swiftype
13、 百度统计
14、 七牛
15、 使用Github Pages建独立博客
16、 为Hexo添加新浪微博秀

更多推荐

Hexo系列1:从零开始搭建hexo博客

本文发布于:2024-03-11 17:09:54,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1729463.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:从零开始   系列   博客   Hexo   hexo

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!