原文地址:http://liangwenhao.cn/2016/08/24/article02/
有关于 Hexo 搭建博客的问题,欢迎在本帖中讨论
前言
其实呢,建立博客非常简单的(哈哈,不管什么东西,你会了觉得不管怎么样都简单,不会的不管怎么样的难),我来给大家说说建立博客的几点步骤: - 使用GitHubPages和Hexo建立自己的博客
- 安装自己喜欢的主题
- 购买域名并绑定
- 安装多说评论框
这里面也就第二项的难度较大,但是不要怕,我会一步一步的给大家完成指导的,如果有任何问题也可以随时联系我,我会尽力给大家解决的!
下面先介绍为何选择GitHubPages和Hexo来搭建博客,然后介绍搭建博客的详细过程。 why GitHub Pages and Hexo之前在关于我里面提到过,搭建博客会有三个阶段,我选择的是第三种方法。因为GitHub的存在,我们得以简单快速地搭建个人博客。 GitHubGitHub,是一个代码托管网站和社交编程网站。这里聚集了世界上各路技术牛叉的大牛,和最优秀的代码库。把你的博客托管在这里,还有什么不放心的呢O(∩_∩)O。
GitHub Pages
GitHub Pages,是用来托管GitHub上静态网页的免费站点,那GitHub Pages具体有哪些功能呢: - 有300M免费空间,资料自己管理,保存可靠;
- 享受 GitHub 的便利,上面有很多大牛,眼界会开阔很多;
- 可以使用很多现成的博客框架,搭建过程简单快速。
HEXOHexo是一个简单、快速、强大的静态博客框架,出自台湾大学生tommy351之手。我也看过使用Jekyll、Octopress搭建个人博客的过程,确实要繁琐许多。相比之下Hexo更轻便更快捷,下面是Hexo官网强调Hexo的四大特点: - 极速生成静态页面
- 一键部署博客
- 丰富的插件支持
- 支持Markdown
相信大家对GitHub Pages和Hexo有了一定的了解,下面进入正题。 使用GitHub Pages建立博客站点注册GitHub 访问GitHub,注册十分简单,一定要记住注册时使用的邮箱,因为 GitHub 上很多通知都是通过邮箱的。如下图所示:
申请成功后,在GitHub官网上登录,并验证邮箱即可。 在GitHub上建立仓库 与 GitHub 建立好连接之后,就可以方便的使用它提供的 Pages 服务,GitHub Pages 分两种,一种是用你的GitHub用户名建立的username.github.io这样的用户&组织站点,另一种是依附项目的Pages。 想建立个人博客是用的第一种,形如username.github.io这样的可访问的站点,每个用户名下面只能建立一个。如下图所示:
搭建环境安装软件Node.jsNode.js下载地址
Node.js
下载完成后根据提示一步一步安装就好,这个没有什么需要特别说明的
GitHub for Windows下载地址
GitHub for Windows
这里有一点说明,下载这个github时因为是先从官网下载下来了一个下载器,然后再在本地下载,因为是外网,可能有点卡,所以下载好了全部并整理好了离线版本,你下载这个直接就自动安装了:
github离线版
密码:olr2 下载并安装下面两个软件,一直点击下一步即可: 使用GitHub for Windows登录GitHub配置SSH Key我们如何让本地git项目与远程的GitHub建立联系呢?用SSH key。在桌面或开始菜单中找到 Git Shell,打开后输入以下命令: ssh -T git@github.com如图:
如果是下面之类的反馈(或者显示 Hi xxx): The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?不用紧张,输入 yes 之后,看到下图的结果,就配置成功了:
使用Hexo创建博客框架Hexo安装打开 Git Shell,启动后依次输入以下命令: cd /npm install hexo-cli -g如图:
提示:cd / 作用是返回根目录,Git Shell 默认装在 C盘,启动时默认路径为 C:\Users\xxx(用户名)\Documents\GitHub,输入 cd / 命令后就返回到了 C盘根目录下,需不需要使用 cd / 看个人习惯(下同) Hexo部署Hexo的部署可采用如下方法,输入命令: hexo init [文件名]。 打开Git Shell,启动后依次输入以下命令: cd /hexo init Hexo回车后出现该提示则表示正确:
部署成功之后,Hexo 会自动在目标文件夹建立博客网站所需要的所有文件。此时可以通过输入以下命令在本地进行预览(在刚才创建的文件夹里): hexo generate hexo server系统可能会出现提示,请点击允许。如下图所示则表示正确:
此时打开浏览器,在浏览器地址栏输入 http://localhost:4000/ (默认端口为4000), 便可以看到最原始的博客了。以后发表博文想先预览,也可以通过 hexo server 在本地先跑起来,看看效果。 效果如下图所示:
恭喜,到目前为止个人博客的雏形已经有了。
在 Git Shell 中按 Ctrl + C 并输入 y 可以停止该服务。 将本地文件部署到 GitHub修改 Hexo 中的 _config.yml 文件 在 Hexo 文件夹下找到 _config.yml 文件,如下图所示:
找到其中的 deploy 标签,改成下图所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错。
将其 deploy 到仓库中打开 Git Shell 进入创建的文件夹,依次输入以下命令: hexo cleanhexo generatehexo deploy如果出现下图错误,不要着急:
将deploy 的 type 改成 git,然后再在 Git Shell 中运行以下命令: npm install hexo-deployer-git --save再重新来一遍: hexo cleanhexo generatehexo deploy出现以下提示则表示正确:
恭喜,到这一步,个人博客就已经部署到 GitHub 上了,你可以到你的GitHub仓库查看是否已经更新。此时,通过 your_user_name.github.io(即你那个仓库的名称,形如:”你的 GitHub 用户名”.github.io),就可以看到你的个人博客了。 PS这里可能会出现这种需要输入账号密码的情况
输入github的账号密码就可以了,记住那里输入密码的时候光标是不会移动的,只要你输入了就好,不要以为没输入上~哈哈哈 发表博文辛苦了这么久,终于回到我们搭建博客最初的目标–写作,现在来看看怎么写博文并发表吧(^__^)。 新建博文我们可以使用命令新建一篇博文,使用 Git Shell 进入 Hexo 文件夹,输入以下命令: hexo new "文章题目"====
命令执行完后,就会发现在 Hexo\source_posts 目录中多了一个文件博文名.md,这就是我们刚才新建的博文。 此外,我们也可以直接进入 Hexo\source_posts 目录中,右键新建一个文本文档,将名字改为博文名.md,这样也新建了一篇博文。 新建页面上面新建的博文是显示在单个文章界面,这里新建的页面是作为单个页面显示的,比如下图的分类、标签、归档和关于我,你点击后都是显示为单个页面。
你只需要记住新建博文是用上面的方法,新建页面是用这里的方法就行了,这里也采用命令新建页面: hexo new page "页面名称"命令执行完后,就会发现在在 Hexo\source 目录中多了一个文件夹,里面还有一个index.md,这就代表我们新建了一个页面。 写博文用文本编辑器打开上面新建的博文,如下图所示:
新建的页面略有不同,没有tags和categories标签。 三个”-“后面就是博文的正文内容,接下来就是正儿八经地撰写博文了。 因为我们的博文都是用Markdown语言写的,所以首先,你需要一个好用的Markdown编辑器。其实好用的Markdown编辑器一大堆,这里就给大家推荐两个,如果你用的不习惯也可以换其它的。 - 本地编辑器:Haroopad,非常小众的一款Markdown编辑器,左边编辑右边实时预览效果,非常轻便;
- 在线编辑器:MaHua,也是比较小众的一款Markdown编辑器,但效果确实很棒,我的这篇博文就是用MaHua写的。
现在你可以打开新建的博文了,然而还不造怎么下手对吧。其实很简单,除了特殊格式,其它的你就当做在word里面写文章就行了,具体请看这里的Markdown教程:Markdown——入门指南。 发博文呼啦啦,博文写好了,你得发表出去别人才看得到呀。依然在 Git Shell 中进入 Hexo 文件夹,执行下面几条命令,将博客部署到 GitHub 上: hexo cleanhexo generate(若要本地预览就先执行 hexo server)hexo deploy快捷命令: hexo g == hexo generatehexo d == hexo deployhexo s == hexo serverhexo n == hexo new还能组合使用,如:hexo d -g刷新你的个人博客,就可以看到新鲜出炉的博文了,赶紧邀请小伙伴们来欣赏吧。
一个可能出现的错误 spawn git ENOENT
安装自己喜欢的主题我们之前使用 Hexo 生成的博客使用的是 Hexo 的默认主题:Landscape。怎么说呢,这个主题猛地一看还行,仔细一看还不如猛地一看,所以我决定另寻归宿。
选择主题
可以在 hexo主题总站 https://github.com/hexojs/hexo/wiki/Themes 寻找自己喜欢的主题。
我在这里推荐一个主题
yilia https://github.com/litten/hexo-theme-yilia 也就是我正在用的主题,简洁大方,比较符合我的品位。
当然每个人的品位都不一样,你可以选择其它的主题,不过欢迎你选择 yilia 主题,这样就能继续一起愉快地折腾啦。
安装 yilia 主题
Hexo 有两份主要的配置文件(_config.yml),一份位于站点根目录下,另一份位于主题目录下。为了描述方便,在以下说明中,将前者称为 站点配置文件,后者称为 主题配置文件。
下载 yilia 主题
使用 Git Shell 进入 Hexo 文件夹,输入以下两条命令:
cd Hexogit clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
启用 yilia 主题
下载完成后,打开 站点配置文件,找到 theme 字段,并将其值更改为 yilia。
验证主题是否启用
执行上面发博文的命令,刷新你的个人博客,就能看到你设置的主题是否启用。
个性化配置
我们来看看如何对默认的主题做些小修改。
首先呢,打开 hexo 文件下的主配置文件,去修改自己的名字及个人介绍。
然后修改每页要显示几篇文章以及确认你是否将主题修改为 yilia。
接下来修改主页、所有文章、以及下面图标。
下面我们再来看下这里的菜单,标签,以及友情链接和关于我的修改方法。
菜单配置要修改 主题配置文件 的 menu 内容,下面是我的主配置示例和菜单配置示例:
主配置示例
- # Hexo Configuration
- ## Docs: https://hexo.io/docs/configuration.html
- ## Source: https://github.com/hexojs/hexo/
- # Site
- title: 大懒虫
- subtitle: 我想把这片田地,种满星星,带你来看~
- description: 这是我的家哦~
- author: 大懒虫
- language: zh-Hans
- timezone:
- # URL
- ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
- url: http://liangwenhao.cn
- root: /
- permalink: :year/:month/:day/:title/
- permalink_defaults:
- # Directory
- source_dir: source
- public_dir: public
- tag_dir: tags
- archive_dir: archives
- category_dir: categories
- code_dir: downloads/code
- i18n_dir: :lang
- skip_render:
- # Writing
- new_post_name: :title.md # File name of new posts
- default_layout: post
- titlecase: false # Transform title into titlecase
- external_link: true # Open external links in new tab
- filename_case: 0
- render_drafts: false
- post_asset_folder: false
- relative_link: false
- future: true
- highlight:
- enable: true
- line_number: true
- auto_detect: false
- tab_replace:
- # Category & Tag
- default_category: uncategorized
- category_map:
- tag_map:
- # Date / Time format
- ## Hexo uses Moment.js to parse and display date
- ## You can customize the date format as defined in
- ## http://momentjs.com/docs/#/displaying/format/
- date_format: YYYY-MM-DD
- time_format: HH:mm:ss
- # Pagination
- ## Set per_page to 0 to disable pagination
- per_page: 5
- pagination_dir: page
- # Extensions
- ## Plugins: https://hexo.io/plugins/
- ## Themes: https://hexo.io/themes/
- theme: yilia
- # Deployment
- ## Docs: https://hexo.io/docs/deployment.html
- deploy:
- type: git
- repository: https://github.com/wenhaoliang/wenhaoliang.github.io
- branch: master
- # Extensions
- Plugins:
- - hexo-generator-feed
- - hexo-generator-sitemap
- #Feed Atom
- feed:
- type: atom
- path: atom.xml
- limit: 5
- #sitemap
- sitemap:
- path: sitemap.xml
- # Duoshuo
- duoshuo_shortname: liangwenhao
复制代码菜单配置示例
- # Header
- menu:#这里是主页菜单的内容
- 主页: /
- 所有文章: /archives
- # 随笔: /tags/随笔
- # SubNav
- subnav:#在这里可以将我的网址改成你自己的
- github: "https://github.com/wenhaoliang"
- #weibo: "http://m.weibo.cn/u/5229251424"
- rss: /404.html
- zhihu: "https://www.zhihu.com/people/da-lan-chong-5"
- #douban:
- #mail: "641541452@qq.com"
- #facebook:
- #google:
- twitter:
- #linkedin:
- #qq: 'http://wpa.qq.com/msgrd?v=3&uin=641541452&site=qq&menu=yes'
- #rss: /404.html
- # Content
- excerpt_link: more
- fancybox: true
- mathjax: true
- # 是否开启动画效果
- animate: true
- # 是否在新窗口打开链接
- open_in_new: false
- # Miscellaneous
- google_analytics: ''
- favicon: /favicon.ico
- #你的头像url,输入你头像的图片的url地址
- avatar: "https://avatars1.githubusercontent.com/u/11350373?v=3&s=460"
- #是否开启分享
- share_jia: false
- share_addthis: false
- #是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
- #若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
- #关于这个多说评论框我在下篇文中讲解
- duoshuo: true
- #是否开启云标签
- tagcloud: hahaha
- #是否开启友情链接
- #不开启——
- #friends: false
- #开启——
- friends:
- Rehack: http://www.rehack.cn/
- 我思故我在: http://artinhuang.com/
- 给时光以生命: http://kingname.info/
- 青春样: http://www.qcyoung.com/
- 黄卯卯的小站: http://huangjinyuan.xyz/
- #是否开启“关于我”。
- #不开启——
- #aboutme: false
- #开启——
- aboutme: 懒
复制代码这样就安装主题完成了~
也可以去这个主题的作者那里学习如何个性化配置 http://litten.github.io/2014/08/31/hexo-theme-yilia/
安装多说评论框Hexo 创建的网站是静态的,也就是说,所有内容都是事先生成好的。这样就导致没法在网站上使用动态功能,比如登录、评论等。但好在,我们可以通过一些第三方的插件来曲线救国,实现这些动态功能。
比如评论功能,可以通过 多说(duoshuo.com)实现。
方法不复杂:
首先登陆多说官网,可使用QQ账号直接登陆。
然后创建站点
获取代码
打开hexo文件夹中_config.yml并添加添加多说的配置: duoshuo_shortname: 你站点的short_name
例如:
然后打开 themes\landscape\layout_partial\article.ejs
去掉之后把你刚才复制的东西粘贴到这个位置,然后就大功告成了~~
购买并绑定域名
哈哈,震撼人心的时刻终于到来了,之前一直都是用的GitHub的二级域名,总有一种又臭又长的感觉。现在,我们就来看看怎么购买自己喜欢的个性化域名,并绑定到你的个人博客上面去。当然,不想花钱购买域名的同学,可以跳过这个步骤,GitHub 提供的二级域名[username.github.io],平常自己写写博客也够用了。
购买域名 就国内的域名代理商综合来说,阿里云收编了万网,还算可以,所以我们这里选择使用阿里云购买域名。不吹不黑,你也可以去任何其他网站购买。 wanwang.aliyun.com
之后就进入付款界面进行付款,完成购买。
将个人域名与 GitHub Pages 的空间绑定 在 Hexo\source 文件夹里新建一个名为 CNAME 的文件,用文本编辑器打开,添加内容 yourwebsite.com (你刚才购买的个人域名 )。保存后,部署你的博客即可。
DNS设置 同样经过广大网友的推广,我选择DNSpod来设置DNS,速度快、免费、且稳定。 注册DNSpod,添加域名,如下图设置:
其中两条A记录指向的IP地址是GitHub Pages的提供的IP:
192.30.252.153 192.30.252.154
如果博客不能访问,有可能是GitHub更改了空间服务的ip地址,及时到GitHub Pages查看最新的IP即可。
www指定的记录是你在GitHub托管博客的仓库。
去阿里云修改DNS地址
如果有疑问可以看 DNSpod 提供的官方帮助。
提示:设置DNS之后短时间内可能无法访问你的个人博客,因为要等待全球递归DNS服务器刷新(最多72小时),不过没问题的话几小时内就可以访问了。
恭喜你 到现在就完成了!
|