今天在翻看自己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.namegit 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 git@github.com

将hexo部署到GitHub

如何将hexo和github关联起来呢，那就要把hexo生成文章部署到GitHub上，打开站点配置文件_config.yml, 翻到最后，修改配置：xxx为你的github账户

# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy: 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:4000hexo server // 部署网站, 可以简写为hexo dhexo 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 git@github.com 在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 git@github.com成功。

hexo的基本配置

网站 (# site)

网址(#URL)

我们在配置文件中将url改成自己的网站域名，permalink是我们生成文章时候的那个链接格式。链接的变量很多，可以点击上面的永久链接去官方文档查找配置。

目录#Directory

# Directorysource_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

# Writingnew_post_name: :title.md # 新文章的文件名称default_layout: post # 预设布局titlecase: false # 把标题转换为 title caseauto_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: falseprismjs: # 代码块的设置, 请参考 PrismJS 进行设置 enable: false preprocess: true line_number: true tab_replace: ''

分类 & 标签

# Category & Tagdefault_category: uncategorized # 默认分类category_map: # 分类别名tag_map: # 标签别名

分页

# Paginationper_page: 10 # 每页显示的文章量 (0 = 关闭分页功能)pagination_dir: page # 分页目录

主题

通常情况下，Hexo 主题是一个独立的项目，并拥有一个独立的 _config.yml 配置文件。

除了自行维护独立的主题配置文件，你也可以在其它地方对主题进行配置。

hexo官网有300多个主题，在这里下载你喜欢的主题进行修改就可以了。直接在github链接上下载下来，然后放到theme文件夹下就行了，然后再在刚才说的配置文件中把theme换成那个主题文件夹的名字，它就会自动在theme文件夹中搜索你配置的主题。

我们也可以自定义自己的主题，或者修改已经安装的主题的样式。

用hexo搭建自己的博客网站-今日头条就分享到这里，想看更多hexo新建博客、hexo创建文章、hexo博客上发布内容就www.1212sj.com。