亲宝软件园·资讯

展开

Hexo+github如何搭建博客

WhiteSir 人气:0
# 前言 # 博客有第三方平台,也可以自建,比较早的有博客园、CSDN,近几年新兴的也比较多诸如:WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。 这次我要说的就是 Github Page + Hexo 搭建个人博客的方式!Github Page 是 Github 提供的一种免费的静态网页托管服务(所以想想免费的空间不用也挺浪费的哈哈哈),可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源,这次我们的主角就是 Hexo 了,具体的内容下面在文章内介绍。 ## 演示站:[晚枫^-博客]( https://whitesir-blog.top/) ![](https://cdn.jsdelivr.net/gh/baifeng66/picgophots/images/博客主页.png) 博客文章链接:https://white_maple.gitee.io/posts/fef1.html 下面就开始吧~ # 一、准备博客环境 # 准备 node 和 git 环境, 首先,安装 [NodeJS](https://nodejs.org/en/),因为 [Hexo](https://hexo.io/zh-cn/) 是基于 Node.js 驱动的一款博客框架,然后,安装 [git](https://git-scm.com/),一个分布式版本控制系统,用于项目的版本控制管理,作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 [Git](https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000) 教程。 ## 1.1 Node.js的安装与配置 ## >下载地址:https://nodejs.org/en/ > >根据你电脑系统的配置信息,下载对应的安装程序,然后开始进行下面的步骤。 ### 这里我推荐[菜鸟教程的Node.js 安装配置](https://www.runoob.com/nodejs/nodejs-install-setup.html)这里面很详细!! 安装完成后呢,我们就要去验证有没有安装成功。 首先,win+R,再输入cmd,按Enter进入到我们的控制台,查看node和npm的版 本,看是否安装成功。 ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDIwOTE5MjIzNTIyMS5wbmc?x-oss-process=image/format,png) 按照上图这样输入命令后,如果结果和上图差不多的话(你们下载的版本有可能不一样),就说明已经安装成功了! 假如执行`node -v`报错的话,那么手动将Node.js的安装路径添加到环境变量中,右击点击我的电脑 ->属性 -> 高级系统设置 -> 环境变量,在系统变量下找到名为path的变量名,如下图: ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzE5MTEwNy5wbmc?x-oss-process=image/format,png) 选中path,或者双击,然后将你node.js的安装路径放在path变量值的最后面,如果添加之前path值最后有 英文的分号,则直接将路径添加进去即可,如果没有,先添加分号,然后点击保存,回到桌面,打开cmd(Win+R),执行`node -v`,看是否成功。 接下来,由于国内镜像源速度比较慢,一般先安装`cnpm淘宝源`,选择复制下列一个命令粘到cmd执行 ```bash # 查看npm的配置 npm config list # 默认源 npm config set registry https://registry.npmjs.org # 临时改变镜像源 npm --registry=https://registry.npm.taobao.org # 永久设置为淘宝镜像源 npm config set registry https://registry.npm.taobao.org # 另一种方式,编辑 ~/.npmrc 加入下面内容 registry = https://registry.npm.taobao.org ``` 安装镜像后,输入下列指令,查看是否安装成功 > cnpm -v ​ ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDIwOTE5Mjg0NDc3MC5wbmc?x-oss-process=image/format,png) # 1.2 Git的安装与配置 # 同样这里我还是推荐大家去[菜鸟教程Git的安装与配置](https://www.runoob.com/git/git-install-setup.html),下载安装后按照下面步骤进行 回到桌面,点击鼠标右键,会出现两个选项`Git GUI Here`和`Git Bash Here`,在打开Cmd(Win+R),分别输入`git`和`git --version`,如果出现如下图的情况,即安装成功! ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9naXQtMTIucG5n?x-oss-process=image/format,png) ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9naXQtMTMucG5n?x-oss-process=image/format,png) # 二、Github注册以及Github Pages创建 我推荐一个简书上面的博主写的文章[Github注册以及Github Pages创建](https://www.jianshu.com/p/683a120c6264),根据他的步骤完成Github的注册以及Github Pages后,让我们进入下一环节!! # 三、配置Git用户名和邮箱 在桌面点击鼠标右键,点击`Git Bash Here`,会出现一个界面如下图所示: ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIxNTExOC5wbmc?x-oss-process=image/format,png) 然后分别输入下面的两个命令,并回车: ```bash git config --global user.name "此处填写你注册时的用户名" git config --global user.email "此处填写你注册时的邮箱" # 一般只要不报错,可以跳过下面寻找.gitconfig文件 ``` 然后找到`.gitconfig`文件,文件存放位置在`C:/Users/[username]/.gitconfig`(未找到的话,请开启显示隐藏文件的功能),用编辑器打开,看到如下图所示的内容,即配置成功! ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMDAxNi5wbmc?x-oss-process=image/format,png) # 四、本地安装hexo静态博客框架以及发布到Github Pages 首先选择一个磁盘作为你博客文件的存放位置,然后新建一个文件夹,比如名为blogtest的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择`Git Bash Here`,然后依次输入如下命令,: ```bash # hexo框架的安装 npm install -g hexo-cli # 等上一个命令完成后,在输入下面的命令 hexo init <新建文件夹的名称> #初始化文件夹 cd <新建文件夹的名称> npm install # 安装博客所需要的依赖文件 ``` ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTEyOS5wbmc?x-oss-process=image/format,png) ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTE0NC5wbmc?x-oss-process=image/format,png) 等待运行完成,此时文件夹中多了许多文件。 **注意**:**后续的命令均需要在站点目录下(即文件夹内)使用Git Bash运行。** 此时Hexo框架的本地搭建已经完成了。我们来运行一下看看,命令行依次输入以下命令 : ```bash hexo g hexo s ``` ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTE1Ny5wbmc?x-oss-process=image/format,png) 浏览器中打开[http://locakhost:4000或者127.0.0.1:4000,可以看到一个网页,说明Hexo博客已经成功在本地运行。](https://yafine-blog.cn/go.html?url=aHR0cDovL2xvY2FraG9zdDo0MDAw5oiW6ICFMTI3LjAuMC4xOjQwMDDvvIzlj6/ku6XnnIvliLDkuIDkuKrnvZHpobXvvIzor7TmmI5IZXhv5Y2a5a6i5bey57uP5oiQ5Yqf5Zyo5pys5Zyw6L+Q6KGM44CC) ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTIwNi5wbmc?x-oss-process=image/format,png) ## 1. 本地博客发布到Github Pages 之前的步骤中,我们已经完成了对Github账户的注册以及Github Pages的创建,接下来是将本地博客发布至Github Pages。 首先需要安装发布的插件,在站点目录下执行下面的命令,也就是创建的博客目录下: ```bash npm install hexo-deployer-git --save ``` 紧接着,将本地目录与GitHub关联起来,输入下面的命令行: ```bash ssh-keygen -t rsa -C "你的邮箱地址" ``` 输入后一直回车,然后在`C:/Users/[username]`目录下找到名为`.ssh`的文件夹, 文件夹内会有两个文件,一个`id_rsa.pub`一个`id_rsa`,用文本编辑器打开`id_rsa.pub`,复制里面的的内容。 然后打开Github,点击右上角的头像 **Settings** 选择**SSH and GPG keys** ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMjc0Ni5wbmc?x-oss-process=image/format,png) 点击**New SSH key** 将之前复制的内容粘帖到Key的框中。 上面的**Title**可以随意,点击**Add SSH key** 完成添加。 ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMzA0OS5wbmc?x-oss-process=image/format,png) 然后回到Git的命令行界面,测试一下是否与GitHub连接成功。输入下面的命令行: ```bash ssh -T git@github.com ``` 点击回车,然后会出现一个询问内容,输入`yes`,回车,会出现一段内容,`Hi ! You've successfully authenticated, but GitHub doesnot provide shell access.`。 说明连接成功。此处这个``应该是你Github的用户名。 进入博客站点目录,用文本编辑器打开`_config.yml`,这个`_config.yml`是博客的配置文件,在以后的博客修改,如个性化修改,博客SEO优化等都会使用到,修改如下图的几个地方: ```yml title: 你的博客名 subtitle: 博客的副标题,有些主题支持 description: 博客描述 keywords: 博客关键词 author: 作者,在文章中显示 language: 博客语言语种 timezone: 时区 ``` ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyNDEzOC5wbmc?x-oss-process=image/format,png) 滑到文件最底部,有一个deploy,在deploy下面添加一个repo项 ,一个branch项。填入如下代码,并如下图所示: ```yml type: git repo: git@github.com:Github用户名/github用户名.github.io.git //也可使用https地址,如:https://github.com/Github用户名/Github用户名.github.io.git branch: master ``` ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyNDE1MS5wbmc?x-oss-process=image/format,png) 最后就是生成页面,并发布至Github Pages,执行如下命令: ```bash # Hexo会根据配置文件渲染出一套静态页面 hexo g # 将上一步渲染出的一系列文件上传至至Github Pages hexo d # 也可以直接输入此命令,直接完成渲染和上传 hexo g -d ``` 上传完成后,在浏览器中打开**https://<用户名>.github.io**,查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话清除一下浏览器缓存试试。 到此,基本的个人博客搭建就完成啦,以为默认的主题不好看,所以后续我会将博客美化教程发出来。 最后,欢迎大家来我的个人博客踩踩哟! # --- [晚枫^-博客]( https://white_maple.gitee.io) --- #

加载全部内容

相关教程
猜你喜欢
用户评论