今天在翻看自己GitHub的时候，忽然发现了那会刚开始做前端的时候搭建的博客，好几年前了，看到新奇的东西就想自己动手鼓捣一下，回想起那会搭建的时候也是费了老鼻子的劲了，最近一年也会偶尔在CSDN写博客记录点东西，那便记录一下怎么利用GitHub和hexo来搭建一个属于自己的博客网站。用Hexo + GitHub 搭建自己的博客网站什么是hexo官方给我们的描述是快速、简洁且高效的博客框架。Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，支持 Markdown 的所有功能，一键部署，只需要一个指令就可以部署到github pages或者其他平台，支持多种模板引擎和工具。安装搭建hexo要用GitHub 和 hexo 搭建个人的博客网站，首先必须有自己的github账号没什么问题吧，其次需要提前准备的环境：下载安装git, nodeJs，这个怎么去安装我想应该不用说了吧（真不知道的话分别百度nodejs， git去官网点击下载安装即可）。准备好环境后我们还要安装 hexo:npm install hexo-cli -g
前面安装了nodejs，现在就i可以直接用 npm安装 hexo，同时按下 window + R 键，输入 cmd 打开终端，执行上面的命令，等待安装完成，完成以后可用hexo -v 查看版本，同时也是验证是否安装完成。如上图说明我们已经安装完成了，然后我们来初始化我们的hexo项目:// blog 是你的项目名字，取什么名字都行您随意
hexo init blog
然后进入你的项目中，安装依赖：cd blog // 进入项目中
npm install // 安装依赖包
完成后你的项目目录应该包含：node_modules：依赖包scaffolds：生成文章的模板source：存放你写的文章themes：主题_config.yml：博客的配置文件hexo server
打开hexo的服务，在浏览器输入http://localhost:4000/ 就可以打开你的博客了。GitHub创建个人仓库前面说过你要有自己的 github 账号，如果你还没有，去注册一个吧，注册完成后登录到GitHub页面，你会看到一个 New repository， 创建一个和你用户名同名的仓库，后面加上.github.io， 只有这样将来部署到 Github Page 的时候， 才会被识别， 也就是 用户名.github.io， 我已经创建过了，再次创建会提示 The repository **xxx.github.io** already exists on this account.，表示我这个账户已经创建过这个仓库。如果你已经创建完成了和你注册GitHub同名的仓库，下面我们来生成ssh密钥：在你项目文件夹点击鼠标右键，点击 git base hero, 打开你的 git base 后，在base中分别输入：git config –global user.name "yourname" // yourname输入你的github用户名
git config –global user.email "youremail" // youremail输入你GitHub的邮箱
可以检查一下你有没有输对git config user.name
git config user.email
配置GitHub ssh密钥创建ssh密钥，一路回车，可以不设置密码ssh -keygen -t rsa -C "youremail"
生成完成后，进入你的用户名文件夹下，找到.ssh 文件夹，里面有两个文件。这个就是密钥，其中 id_rsa是你电脑的私人密钥，id_rsa.pub 是公共密钥。我们要做的就是把公钥配置到GitHub中，这样当你访问链接自己的GitHub账号时，它就会根据公钥配到你的私钥，当能达到匹配的时候，你就能通过git上传你的项目到GitHub中了。下面我们来配置自己的ssh密钥，进入你的GitHub页面，点击右上角你的账号头像，在下拉菜单中找到 settings 菜单，点击进入设置页面，然后在设置页面左边的菜单分类中找到 Access 下面的 SSH and GPG keys 菜单，然后点击 New SSH key 按钮，把你本地创建的公钥复制后粘贴到key 的输入框中， title 随便输都行，然后保存。在gitbase中查看是否成功ssh -T [email protected]
将hexo部署到GitHub如何将hexo和github关联起来呢，那就要把hexo生成文章部署到GitHub上，打开站点配置文件_config.yml, 翻到最后，修改配置：xxx为你的github账户# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/xxx/xxx.github.io.git
branch: master
要完成部署操作，你还需要安装 deploy-git ：npm install hexo-deployer-git –save
然后我们需要了解一下hexo的常用命令：// 新建一个网站，如果没设置 floder hexo默认在当前文件夹下创建网站
hexo init [flolder]
// 新建一篇文章，如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
hexo new [layout] <title>
// 生成静态文件。
hexo generate // hexo g -d, 文件生成后立即部署网站
// 发表草稿
hexo publish [layout] <filename>
// 启动服务器。默认情况下，访问网址为： http://localhost:4000
hexo server
// 部署网站, 可以简写为hexo d
hexo deploy
// 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo clean
hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写 hexo deploy 部署文章，可以用hexo d缩写当然你也可以用 hexo g -d 一步完成部署。如果在执行部署网站的时候出现下列错误: ”Software caused connection abort fatal: Could not read from remote repository.”, 很可能是dns解析问题，用 ssh -T [email protected] 在gitbase中检测是否正常，打开cmd输入ping github.com是否能连接，配置本地的hosts 文件， 文件路径 c:\windows\system32\drivers\etc\hosts,在末尾添加上：140.82.112.4 github.com git 140.31.16.184 github.global.ssl.fastly.net 复制代码gitbase 再次ssh -T [email protected]成功。hexo的基本配置网站 (# site)参数描述title网站标题subtitle网站的副标题description网站描述keywords网站的关键词。支持多个关键词。author作者名字language网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。timezone网站时区。Hexo 默认使用您电脑的时区。般的，对于中国大陆地区可以使用 Asia/Shanghai。网址(#URL)参数描述默认值url网址, 必须以 http:// 或 https:// 开头root网站根目录/permalink文章的 永久链接 格式:year/:month/:day/:title/permalink_defaults永久链接中各部分的默认值pretty_urls改写 permalink 的值来美化 URLpretty_urls.trailing_index是否在永久链接中保留尾部的 index.html，设置为 false 时去除truepretty_urls.trailing_html是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效）true我们在配置文件中将url改成自己的网站域名，permalink是我们生成文章时候的那个链接格式。链接的变量很多，可以点击上面的永久链接去官方文档查找配置。目录#Directory# Directory
source_dir: source # 资源文件夹，这个文件夹用来存放内容。
public_dir: public # 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags # 标签文件夹
archive_dir: archives # 归档文件夹
category_dir: categories # 分类文件夹
code_dir: downloads/code # Include code 文件夹，source_dir 下的子目录
i18n_dir: :lang # 国际化（i18n）文件夹
skip_render: # 跳过指定文件的渲染
如果您刚刚开始接触 Hexo，通常没有必要修改这一部分的值。文章#Writing# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post # 预设布局
titlecase: false # 把标题转换为 title case
auto_spacing: false # 在中文和英文之间加入空格
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: '' # 需要排除的域名
filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false # 显示草稿
post_asset_folder: false # 启动 Asset 文件夹
relative_link: false # 把链接改为与根目录的相对位址
future: true # 显示未来的文章
highlight: # 代码块的设置, 请参考 Highlight.js 进行设置
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs: # 代码块的设置, 请参考 PrismJS 进行设置
enable: false
preprocess: true
line_number: true
tab_replace: ''
分类 & 标签# Category & Tag
default_category: uncategorized # 默认分类
category_map: # 分类别名
tag_map: # 标签别名
分页# Pagination
per_page: 10 # 每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page # 分页目录
主题通常情况下，Hexo 主题是一个独立的项目，并拥有一个独立的 _config.yml 配置文件。除了自行维护独立的主题配置文件，你也可以在其它地方对主题进行配置。hexo官网有300多个主题，在这里下载你喜欢的主题进行修改就可以了。直接在github链接上下载下来，然后放到theme文件夹下就行了，然后再在刚才说的配置文件中把theme换成那个主题文件夹的名字，它就会自动在theme文件夹中搜索你配置的主题。我们也可以自定义自己的主题，或者修改已经安装的主题的样式。