http://www.jianshu.com/p/e99ed60390a8
http://www.jianshu.com/p/e99ed60390a8
http://www.jianshu.com/p/e99ed60390a8
http://www.jianshu.com/p/e99ed60390a8
http://www.jianshu.com/p/e99ed60390a8
20分钟教你使用hexo搭建github博客
背景叨叨叨
很久以前就想搭建一个个人技术博客的网站了,但是那时候接触的东西不多,没有听说过hexo、jekyll、wordpress等快速blog生成工具,自己在网上找了博客模板,修改了一下前端代码,用eclipse基于jsp搭建了一个小型博客发布到阿里云,但是时间久了发现自己写的代码不稳定,经常获取不到数据库数据,于是放弃了做个人博客网站的想法。
后来听说了hexo,但是一直没有定下心去看官方文档,于是搭博客网站的想法再一次不了了之。今晚闲暇,实在不知道该干什么,于是捡起了搭博客的想法,入门了hexo搭建github博客,现在记录下来,也算是作个念象,给想要搭建个人博客网站的小伙伴们一个参考。
PS: 因本人使用的是苹果机,所以本教程以Mac OS为参考,其实mac与windows搭建github博客相差无几,如果有用windows的小伙伴感到不适,可以参考手把手教你建github技术博客教程。
注册Github账号
这里我们就不多讲了,小伙伴们可以点击这里,进入官网进行注册。
创建仓库
文章图片
图片来自Github 登录账号后,在Github页面的右上方选择New repository进行仓库的创建。
文章图片
图片来自Github 在仓库名字输入框中输入:
你想要的名字.github.io
然后点击
Create repository
即可。生成添加秘钥
在终端(Terminal)输入:
ssh-keygen -t rsa -C "Github的注册邮箱地址"
一路
Enter
过来就好,待秘钥生成完毕,会得到两个文件id_rsa和id_rsa.pub,用带格式的记事本打开id_rsa.pub,Ctrl + a复制里面的所有内容,然后进入https://github.com/settings/ssh:![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/4bd591150a244bb890d3e34784c4914c.jpg)
文章图片
图片来自Github 将复制的内容粘贴到Key的输入框,随便写好Title里面的内容,点击
Add SSH key
按钮即可。安装node.js
点击进入node.js官网
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/9f02d75763bd4c43a4f0ce9f378e7fa9.jpg)
文章图片
图片来自node.js官网 目前node.js有两个推荐版本,分为通用版和最新版,点击可直接进行下载。下载好后,按照既定的套路安装即可。
安装git
这里说的git实则是为了使用git指令,我们的git使用一般有两种方式,一种是图形化界面(GUI),另一种是通过命令行,我们这里要使用的是后者,点击这里进入git的下载网站下载git的安装包。
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/299eb63c664c4433bcaec9856a4a450c.jpg)
文章图片
图片来自git 有人说,Mac自带git指令;也有人说安装xcode就可以使用git指令。因本人已经忘记当初自己是如何安装git的,所以大家根据自己的实际情况做决定吧。
安装配置hexo
强调一下,这一步使我们搭建博客的核心,是重中之重。
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/b53b6e3e372746f2be57f61d124d76fc.jpg)
文章图片
图片来自hexo
有能力的同学可以选择进入官网自行查看hexo官方文档,愿意听我叨叨的同学可以继续往下看。
友情提示:hexo官网在的情况下便于顺利加载。
接下来我们的操作都将在Terminal终端进行:
- 定位博客本地放置的路径
$ cd 文件夹
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/92a168a40cab474db0d743b2f56bbbf1.jpg)
文章图片
定位博客所在目录 强调:强烈建议不要 选择需要管理员权限才能创建文件(夹)的文件夹。
- 下载安装hexo
$ npm install -g hexo-cli
安装好hexo以后,在终端输入:
$ hexo
若出现下图,说明hexo安装成功:
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/1caac5ec3cf941518fcf3aead3a03a08.png)
文章图片
hexo安装成功
- 初始化博客
// 建立一个博客文件夹,并初始化博客,为文件夹的名称,可以随便起名字
$ hexo init
// 进入博客文件夹,为文件夹的名称
$ cd
// node.js的命令,根据博客既定的dependencies配置安装所有的依赖包
$ npm install
初始化博客以后,我们可以看到博客文件夹里的文件是这样的:
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/78d1064590e543e7a8d0ca8bba4d44a3.jpg)
文章图片
hexo博客文件夹
- 配置博客
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/# Site
title: # The title of your website
subtitle: # The subtitle of your website
description: # The description of your website
author: # Your name
language: # The language of your website
timezone: # URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com/child
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: 10
pagination_dir: page# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
看到这里,大家千万别被一长串英文给吓到了,我们实际上要修改的配置只有几项,拿我自己的配置,我们继续往下看:
1. 修改网站相关信息
title: inerdstack
subtitle: the stack of it nerds
description: start from zero
author: inerdstack
language: zh-CN
timezone: Asia/Shanghai
language和timezone都是有输入规范的,详细可参考语言规范和时区规范。
注意:每一项的填写,其
:
后面都要保留一个空格,下同。2. 配置统一资源定位符(个人域名)
url: http://inerdstack.com
对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。
3. 配置部署
deploy:
type: git
repo: https://github.com/iNerdStack/inerdstack.github.io.git
branch: master
其中repo项是之前Github上创建好的仓库的地址,可以通过如下图所示的方式得到:
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/cc2e2e3a378544b68426522a3cd24d3f.jpg)
文章图片
图片来自Github branch是项目的分支,我们默认用主分支master。
发表一篇文章
在终端输入:
// 新建一篇文章
hexo new "文章标题"
我们可以在本地博客文件夹
source
->_post
文件夹下看到我们新建的markdown文件。![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/9189f27b429a401a80e0bd5446044022.jpg)
文章图片
md文件 用Markdown编辑器打开文件,我们可以看到这样的内容:
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/d25e751a9563415c82de12106561c39f.jpg)
文章图片
md文件自动生成内容 我们写下:
你好,欢迎来到我的个人技术博客。
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/a370475c3855490e844c67a1194bae22.jpg)
文章图片
输入文章内容 保存后,我们进行本地发布:
$ hexo server
如下图:
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/113cba9b1f704eafa0cc2650e5ee3c7d.png)
文章图片
本地发布博客 打开浏览器,输入:
http://localhost:4000/
我们可以在浏览器端看到我们搭建好的博客和发布的文章:
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/9d23aad548e04aebb2f464848d0bab9e.jpg)
文章图片
本地博客发布 当然,我们也可以手动添加Markdown文件在
source
->_deploy
文件夹下:![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/83b08952134547bb9cb6e50cdbddca4c.jpg)
文章图片
手动添加markdown文件 其效果同样可以媲美
hexo new
:![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/b4dbba34ee4041e7bff8733287c7dbc1.jpg)
文章图片
本地发布效果图 但是毕竟我们目前发布的只有本机看得到,怎么让其他人看到我们写的博客呢?这时候我们来看看博客的部署。
我们只要在终端执行这样的命令即可:
$ hexo deploy
这时候我们的博客已经部署到网上了,我们可以在浏览器地址输入栏输入我们的网址即可,如我的博客是:inerdstack.github.io。
![20分钟教你使用hexo搭建github博客](https://img.it610.com/image/info8/1273382ec92d40c2b11a5913e1204265.jpg)
文章图片
已发布的博客 本教程为博客搭建入门教程,大家可以根据自己的需求做进一步改进,如更换主题、删除文章等,详情参考官方文档。
文/inerdstack(简书作者)
原文链接:http://www.jianshu.com/p/e99ed60390a8
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
【20分钟教你使用hexo搭建github博客】