使用GitHub+Hexo快速搭建个人技术博客

前言

前几天使用github+hexo配合网络教程搭建了一个个人博客,遇到了一些问题。现在完整记下来,希望下次绕过这些坑。

本人博客:[五谷山精分道长的博客](https://huruwo.github.io/)

搭建博客步骤

  1. 注册Github账号
  2. 建立仓库名为username.github.io的仓库
  3. 安装Git/Github桌面版
  4. Git和Github设置密钥关联起来(使用Github桌面半不需要,只需要登录即可)
  5. 安装Node.js
  6. 使用Node.js安装npm 再用npm安卓hexo
  7. 配置hexo,主要是github地址填写
  8. hexo g生成所需静态页面
  9. hexo deploy上传到git --大功告成

下面详细解释一下这些步骤:

注册GitHub账号

前往Github主页https://github.com/ 点击注册,按要
求填写邮箱密码用户名即可。注意用户名和你的gityhub地址有关,注意填写。最后进行邮箱认证。

新建仓库

点击New Repository 建立新的仓库。
跳转到新的界面,填写仓库名 “username”.github.io。
比如我的是huruwo.github.io
确定。

安装Git/Github桌面版

我建议安装github桌面版,自带gitshell
安装地址为https://desktop.github.com/
可能下载速度慢,学会科学上网。或者下载离线包GitHub离线安装包
下载完,点击安装即可。
最后出现这两个图标:
图片描述

点击GitHub,登录自己的GitHub账号
就能看到自己的仓库了。其实这已经配置好Sh密钥了。
不信点击自己的Github账号 setting--SSHKey
图片描述

有了github就不要再次安装其他git工具了,直接可以在内部找到github的git.exe写入环境变量即可。

安装Node.js

百度 Node.js 进入官网下载安装

安装npm

npm是Node.js自动的包管理插件,通过npm可以下载安装nodejs的模块包。这和Python一样。
版本查看

C:\Users\Administrator>node -v
v6.9.1

C:\Users\Administrator>npm -v
3.10.8

安装hexo

打开命令行-->

npm install -g hexo

如果没有翻墙,会出现错误
需要设置代理

npm config set registry http://registry.cnpmjs.org
npm install express --registry=https://registry.npm.taobao.org

删除刚刚安装的npm目录,
或者执行

npm cache clean

删除缓存
重新执行命令npm install -g hexo安装hexo

创建Hexo工程文件

在你喜欢的地方新建一个Hexo文件夹,作为hexo的安装目录

shift+右键--->在当前位置打开命令行
初始化

hexo init

创建网站,开启服务

hexo generate
hexo server

现在我们已经搭建起本地的hexo博客了,到浏览器输入localhost:4000看看。

配置hexo,主要是github地址填写

打开配置文件_config.yml,修改最后一行:
配置仓库地址:

deploy:
  type: git
  repository: 仓库地址
  branch: master

记得地址是带.git

QQ截图20170215164833.png
然后:

hexo deploy

如果失败,请先安装git模块

npm install hexo -server --save

如果出错可改为(添加:--registry https://registry.npm.taobao.org)

npm --registry https://registry.npm.taobao.org install hexo -server --save

没有出错即

INFO  Deploy done: git

可完成,现在输入你的
username.github.io即可访问你的网站。

其他:

部署步骤

每次部署的步骤,可按以下三步来进行。

hexo clean
hexo generate
hexo deploy

一些常用命令:

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本

全局配置 _config.yml

title:  #标题
subtitle:  #副标题
description:  #站点描述,给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
  type: git
  repo: 刚刚github创库地址.git
  branch: master

主题推荐

Next-----
具体使用查看文档