怎样利用hexo+github建立自己的网站

最新推荐文章于 2024-07-12 14:51:48 发布

水无垠ZZU

最新推荐文章于 2024-07-12 14:51:48 发布

阅读量340

点赞数 1

分类专栏： GitHub 文章标签： hexo hexo+github 自己建站

本文链接：https://blog.csdn.net/low5252/article/details/100123781

版权

GitHub 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

基于hexo搭建个人blog的文章在网上已经有很多了，不过由于时间的原因有很多已经不再适用或者说留下了很多坑，本文是基于个人这些天搭建的经历，踩了无数坑把这些坑给填上后的方法，相信小白看着也能直接搭建一个漂亮美观可随时访问的个人博客。
注意：在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。

hexo介绍

在这里插入图片描述
官网上的描述是hexo是一个快速，简单而强大的博客框架。您可以使用Markdown（或其他语言）编写文章，Hexo可以在几秒钟内生成具有美丽主题的静态文件。Markdown语言就不用说了，现在应该是主流文本编辑语言，很多博客都支持它，而且很好用。

正文

Git安装

下载并安装git（安装就是一直next就可以）

git主要用于版本控制，另外这里hexo的操作很多都需要在git bash进行，不然会出现奇怪错误，想要了解更多git知识可以参考以下链接：Git教程–廖雪峰网站。当然，直接跟着本教程走也是完全没问题的。
实际上，就自己建站而言，也就不需要太多的git知识，因此本教程也就足够了，平常也不怎么用git。

node.js安装

安装 Node.js 的最佳方式是使用 nvm。nvm 的开发者提供了一个自动安装 nvm 的简单脚本：

cURL:

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | sh

Wget:

$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

或者您也可以下载安装程序来安装。

对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。
另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用Git Bash来进行操作。
、
安装后输入Win+R输入cmd打开控制台输入以下代码：

node -v
npm -v

如果返回版本号即安装完成，否则就需要配置环境变量（参考步骤2中的图片）再测试

hexo安装

打开git bash，为了避免出现错误后面的操作在git bash进行
首先新建一个存放hexo文件的目录，例如在D盘根目录新建hexo文件夹，然后cd到该目录下，开始安装

$ cd D:hexo/     #换成你的目录
$ npm install -g hexo-cli  #安装hexo脚手架
$ hexo init      #Hexo自动在当前文件夹下下载搭建网站所需的所有文件
$ npm install      #安装依赖包

$ hexo g         #完整命令为hexo generate，生成静态文件
$ hexo s         #完整命令为hexo server，启动服务器，用来本地预览

用浏览器访问 http://localhost:4000/，这时就可以看到了一个比较漂亮的博客了，这个是hexo的默认主题 landscape，而我们会使用的是NexT主题，这个在后面会说到如何配置。

github部署

本地博客搭建好了接下来是要把它部署到网上，这里可以选择github和国内的coding平台，后者在打开自己网站时会跳出广告，前者访问速度比较慢，大家自行选择，然后我现在的话是前者。
注册部分我就不说了，详细可以看这篇。下面详细说一下github的Pages服务如何创建

1.Github Page

打开github主页，新建仓库（repository），这里要注意仓库的名称，比如我的帐号是alvabill，那么仓库名称应该是：alvabill.github.io。
在这里插入图片描述

配置SSH

以上过程完成后就是把hexo生成的静态页面上传了，以为要结束了吗，还没呢，这里还需要配置SSH，首先要本地生成公钥私钥

$ ssh-keygen -t rsa -C "你的邮件地址"

引号里面的内容输入你的邮箱地址，然后回车，会提示你文件保存的路径，这时候按回车键确认，然后会提示你输入github密码，输入即可（输入密码是看不到的），然后会确认输入一次，就可以在刚刚的路径看到生成了两个文件，一个是id_rsa，另一个是id_rsa.pub，在提示路径里面打开id_rsa.pub然后选中里面的全部内容，复制下来。
打开GitHub或Coding的SSH页面

Github：setting-->SSH and GPG keys-->New SSH key

在这里插入图片描述
黏贴

发布：

打开最初新建的文件，用相关工具（我用的是vs）打开根文件**_config.yml**文件
在这里插入图片描述
文件最后可以看到

deploy:
  type:

修改（注意要换上自己的链接）

deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git   #发布到github

  branch: master

在这里插入图片描述
ctrl+s保存修改。
打开git bash在当前目录输入以下命令：

$ hexo d #完整命令为hexo deploy，将本地文件发布到page服务平台上

如遇遇到异常可以

$ hexo clean && hexo g
$ hexo d

如果出现以下异常（我就遇到了??）

ERROR Deployer not found: git

尝试输入以下命令，然后重新执行刚刚的两条命令

$ npm install hexo-deployer-git --save

注意：这时候如果弹出一个对话框，输入在github上面的用户名和密码即可
这时候我们就可以在浏览器输入https://yourname.github.io 打开

常见问题：

hexo deploy没有反应？
修改配置文件：_config.yml时，冒号后面没加空格。
hexo s 网站打不开？
端口占用，换个端口就好了。执行命令hexo s -p 5000，并在浏览器地址栏输入http://localhost:5000，回车访问。

更改主题

好的主题有很多，我就以next主题为例！

安装next

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下，然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。

下载主题

如果你熟悉 Git，建议你使用 克隆最新版本 的方式，之后的更新可以通过 git pull 来快速更新，而不用再次下载压缩包替换。

克隆最新版本：
在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

下载稳定版本：

前往 NexT 版本发布页面。
选择你所需要的版本，下载 Download 区域下的 Source Code (zip) 到本地。例如，下载 v5.1.4 版本： next-releases
解压所下载的压缩包至站点的 themes 目录下，并将解压后的文件夹名称 （hexo-theme-next-0.4.0） 更改为 next。

启用主题

与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，用相关应用打开 站点配置文件，找到 theme 字段，并将其值更改为 next。

theme：next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前，我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。当命令行输出中提示出：

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。
其他详细信息可以参考：theme参考文档

绑定域名

博客已经搭建好，也能通过github的域名访问，但总归还是用自己的域名比较舒服。因为我们需要设置将自己的域名绑定到github这个博客项目上。

域名提供商设置

添加2条A记录：

@—>192.30.252.154

@—>192.30.252.153

添加一条CNAME记录：

CNAME—>tengzhangchao.github.io

博客添加CNAME文件

配置完域名解析后，进入博客目录，在source目录下新建CNAME文件，写入域名，如：thief.one

运行：hexo g

运行：hexo d

更新博客内容

至此博客已经搭建完毕，域名也已经正常解析，那么剩下的问题就是更新内容了。

更新文章

在我们创建的文件目录下执行：hexo new “我的第一篇文章”，会在source->_posts文件夹内生成一个.md文件。
编辑该文件（遵循Markdown规则）
修改起始字段

title 文章的标题
date 创建日期 （文件的创建日期 ）
updated 修改日期 （ 文件的修改日期）
comments 是否开启评论 true
tags 标签
categories 分类
permalink url中的名字（文件名）

编写正文内容（MakeDown）
hexo clean 删除本地静态文件（Public目录），可不执行。
hexo g 生成本地静态文件（Public目录）
hexo deploy 将本地静态文件推送至github（hexo d）

添加菜单

进入theme目录，编辑_config_yml文件，找到menu:字段，在该字段下添加一个字段。

  menu:
  home: /
  about: /about
  ......

然后找到lanhuages目录，编辑zh-Hans.yml文件：

  menu:
  home: 首页
  about: 关于作者
  ......

更新页面显示的中文字符，最后进入theme目录下的Source目录，新增一个about目录，里面写一个index.html文件。

文章内插入图片

在文章中写入: 在这里插入图片描述

然后进入themes-主题名-source-upload_image目录下(自己创建)，将图片放到这个目录下，就可以了。

说明：当执行hexo g命令时，会自动把图片复制到 public文件的upload_image目录下。

解疑

可能有人会问了，那我弄半天GitHub与这有什么关系？
其实现在你就可以直接访问利用GitHub用户名.github.io，当然你可以在你买的域名访问也行，不买也可以，反正我的访问速度挺快的。
第二点其实就是当你充分掌握git和GitHub时，你就可以直接在GitHub上更新博客，或者利用git个更新（前面有讲过）。