Hexo+Github简单打造自己专属博客

最新推荐文章于 2024-09-23 10:15:55 发布

yanner_

最新推荐文章于 2024-09-23 10:15:55 发布

阅读量481

点赞数 2

分类专栏：工具文章标签： github 前端博客

本文链接：https://blog.csdn.net/yanner_/article/details/78067069

版权

工具专栏收录该内容

10 篇文章 0 订阅

订阅专栏

作为一个前端儿当然想有一个自己专属域名的网站，但是现在还在前端门口瞎晃的我显然还干不了这件事，于是就寻思着先借助GitHub pages搭建一个专属自己的博客，这种相比其他博客网站更自由，所以大家就自由发挥啦，搭建好博客后，有前端基础的就可以任意设计自己的博客页面，不懂前端的也不难，只要看着教程或者直接应用hexo的博客主题就行，其中可能会出现很多问题和很多坑，但这也是一个学习的过程，我就遇到了n多问题。

一.搭建环境准备（以下都在windows系统上）
Node.js安装和准备
git的安装和准备
GitHub账户的配置

1.配置Node.js环境
安装地址（LTS为长期支持版，Current为当前最新版）
下载好后直接一路默认安装即可，不过在custom setup这一步记得选 Add to Path，这样我们就不用自己在电脑上配置环境变量了。下面测试一下组件是否安装好，在windows运行窗口输入以下命令：

node -v

2.配置git环境
git安装（可能需要翻墙）
推荐：国内镜像安装（一路默认安装即可）
下面测试是否安装正确，打开git命令行输入下面命令：

git --version

这里写图片描述
如果如上图所示，说明安装正确

配置ssh:打开git bash终端设置user.name和user.email,输入以下命令（名字和邮箱都写你自己的）：

$ git config --global user.name"Your Name"  
$ git config --global user.email"email@example.com"

因为Git是分布式版本控制系统，所以每个机器都要有自己的名字和email。再输入以下命令生成ssh密钥：

ssh-keygen -t rsa -C "email@example.com"

此时在user文件夹下会生成一个.ssh文件，里面有刚刚创建的ssh密钥文件id_rsa和id_rsa.pub。运行该命令后会提示让你输入push文件时的密码，当然你可以直接回车到时候push文件就不用输入密码了，可以直接提交到github上了。

下面将ssh key添加到你的github上：首先你需要拷贝 id_rsa.pub 文件的内容，然后登陆你的github账户，从右上角setting进入以下界面，找到SSH and GPG keys选项，最后将你之前拷贝的东西复制到ssh keys下面的文本框里，点击Add SSH key(添加SSH)按钮就好了。
这里写图片描述

3.github账户的注册及配置

创建代码库：登录之后点页面右上角加号new repository进入代码库创建页面
这里写图片描述
在Repository name下填写yourname.github.io(例如我的账户名是yanzhanger，那我就填写yanzhanger.github.io),这个以后将作为你博客的URL。在Description下填写简单描述（例如my blog site）不写也行。

代码库设置：正确创建代码库之后将会看到以下界面
这里写图片描述

接下来开启github pages功能，点击界面右侧Settings进入设置界面，向下拖动找到Github Pages选项
这里写图片描述

然后点击choose a theme进入选择一个自己想要的主题就可以了
这里写图片描述

这时github将会为你创建一个github pages界面，如果配置没问题大概15分钟后你就可以访问你的yourname.github.io这个网址了。至此，我们搭建博客的环境已经配置好了。

二.hexo博客框架的安装和配置

hexo：是一个快速简洁的博客框架，我们只需要用hexo的一些命令用git把代码提交到github上并且开启github pages就可以访问自己的博客了。

1.hexo安装：在你电脑任意盘下创建一个文件夹，打开文件夹在空白地方右击打开git bush命令行。

安装方法一：用npm安装，在你的命令行中输入以下命令（分开输入）：

npm install hexo-cli -g
npm install hexo --save

(npm 安装就是我遇到的坑，好像最近国内npm源有问题用不了，所以只能用淘宝源安装了，推荐用方法二安装吧。)

安装方法二：用淘宝源安装，在命令行输入

 npm install -g cnpm --registry=https://registry.npm.taobao.org
 cnpm install hexo-cli -g

然后你会看到刷了很多行白字不用管，输入下面命令检查是否安装好：

hexo -v

如果显示下面界面说明安装好了：
这里写图片描述

2.hexo配置

初始化hexo：

hexo init

然后安装你需要的组件输入命令

cnpm install

至此hexo就安装好了，下面来体验一下hexo，同样是在命令行输入：

hexo g

显示如下界面：
这里写图片描述
然后输入：

hexo s

会显示：
这里写图片描述

于是我们打开localhost：4000会看到界面
这里写图片描述

敲重点了：又是一个坑！万一你打不开这个界面怎么办？这里解释一下hexo默认的接口是4000，但是如果你的电脑上装了不明软件霸占了这个接口，那你hexo就得手动换个接口了（例如5000）输入以下命令试试：

hexo s -p 5000

这时在浏览器中输入地址localhost：5000就可以看到这个界面了。

敲重点：说一下hexo常用的几个命令：
hexo s:启动本地服务器，用于预览主题。对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。
hexo clean:清除缓存文件 db.json 和已生成的静态文件 public(网站显示异常时可以执行这条命令试试)
hexo g：生成网站静态文件到默认设置的 public 文件夹。
hexo d:自动生成网站静态文件，并部署到设定的仓库。

三.将hexo与github pages联系起来

打开之前创建的文件夹里的_config.yml文件，找到Deployment，然后按照如下配置：

deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

注意将yourname改为你在github上建仓库的名字。
敲重点：yml格式非常严格，一定要在type,repo,branch后加一个空格。
至此所有的环境都配置好了，用git命令输入hexo clean，hexo g，hexo d就好了。下面就可以用yourname.github.io访问你的博客主页了。
踩坑注意：这里需要提前安装一个扩展。

npm install hexo-deployer-git --save

如果没有安装的话，将会提示：

deloyer not found:git

四.配置hexo主题

如果我们在浏览器中输入yourname.github.io进入博客主页，那我们目前看到的界面将会是hexo默认的landscape主题，我们可以按自己的喜好安装配置不同的主题，现在推荐知乎上几个star比较高的主题：

1.next主题（这个主题可以自己自由发挥设置自己的博客界面，推荐有前端基础的人用）
2.yilia主题（这个主题很简约，配置起来也很方便）
3.casper主题
4.uno主题
5.modernist主题

我们只需要在github上将这些主题文件download下来，然后放在你文件夹的themes文件夹中就可以了，最后在站点配置文件config.yml找到关键字theme，将其后面的主题改为你要配置的主题即可，然后hexo s后就可以预览你的博客主页了。最后hexo clean,hexo g,hexo d便可以在你的yourname.github.io的域名网站访问你的博客主页了。

关于next主题的配置我将在后续说明。