Hexo+Github 搭建属于自己的博客

最新推荐文章于 2024-06-11 02:45:00 发布

hldiablo

最新推荐文章于 2024-06-11 02:45:00 发布

阅读量579

点赞数

文章标签： hexo

前言

参考网上几个教程后终于搭建起了自己的个人博客页面，所以整理一下自己也制作这么一个教程，顺便练习一下markdown

文章转载参考：手把手教你用Hexo+Github 搭建属于自己的博客

步骤

搭建环境准备（包括node.js和git环境，gitHub账户的配置）
安装、配置Hexo
Hexo与github page 联系起来
发布文章

环境搭建准备

Node.js 的安装和准备
Git的安装和准备
gitHub账户的配置

配置Node.js环境

下载Node.js安装文件

根据自己的Windows版本选择相应的安装文件，如图所示：

然后我们检查一下是不是要求的组件都安装好了，同时按下Win和R，打开运行窗口：

cmd

在新打开的窗口中输入cmd，敲击回车，打开命令行界面。

在打开的命令行界面中，输入

node -v
npm -v

如果结果如下图所示，则说明安装正确，可以进行下一步了，如果不正确，则需要回头检查自己的安装过程。

配置Git环境

首先下载Git安装文件：官网下载地址

然后进入安装界面，如下图：

Git Setup

Git PATH设置

Git PATH

按照上图进行的选择，将会使得Git安装程序在系统PATH中加入Git的相关路径，使得你可以在CMD界面下调用Git，不用打开Git Bash了。

安装完成后检查一下Git是不是安装正确了，打开命令行，输入：

git --version

如果结果如下图所示，则说明安装正确，可以进行下一步了，如果不正确，则需要回头检查自己的安装过程。

不熟悉git的可以参考此网站：Pro Git 简体中文版

github账户的注册和配置

注册Github账号
创建代码库

登陆之后，点击页面右上角的加号，选择New repository：

进入代码库创建页面：

在Repository name下填写yourname.github.io，Description (optional)下填写一些简单的描述（不写也没有关系），如图所示：

注意：这里的yourname,如果你的名字是xxx，那你就填 xxx.github.io

代码库设置

正确创建之后，你将会看到如下界面：

接下来开启gh-pages功能，点击界面右侧的Settings，你将会打开这个库的setting页面，向下拖动，直到看见GitHub Pages，如图：

点击Automatic page generator，Github将会自动替你创建出一个gh-pages的页面。如果你的配置没有问题，那么大约15分钟之后，yourname.github.io这个网址就可以正常访问了~ 如果yourname.github.io已经可以正常访问了，那么Github一侧的配置已经全部结束了。

安装 Hexo

首先，在自己认为合适的地方创建一个文件夹，这里我以E：/hexo 为例子讲解，首先在E盘目录下创建Hexo文件夹，并在命令行的窗口进入到该目录

在命令行中输入：

npm install hexo-cli -g

然后会看到：

可能你会看到一个WARN，但是不用担心，这不会影响你的正常使用。然后输入

npm install hexo --save

然后你会看到命令行窗口刷了一大堆白字，下面我们来看一看Hexo是不是已经安装好了。在命令行中输入：

hexo -v

如果你看到了如图文字，则说明已经安装成功了。

hexo的相关配置

初始化Hexo
接着上面的操作，输入：

hexo init

然后输入：

npm install

之后npm将会自动安装你需要的组件，只需要等待npm操作即可。

首次体验Hexo
继续操作，同样是在命令行中，输入：

hexo g

然后输入：

hexo s

然后会提示：

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

在浏览器中打开http://localhost:4000/，你将会看到：

到目前为止，Hexo在本地的配置已经全都结束了。

将Hexo与github page 联系起来

配置Git个人信息

设置Git的user name和email：

git config --global user.name "yourname"
git config --global user.email "Github的注册邮箱地址"

生成密钥

ssh-keygen -t rsa -C "Github的注册邮箱地址"

3.添加密钥
待秘钥生成完毕，会得到两个文件id_rsa和id_rsa.pub，默认的存储路径是：

C:\Users\Administrator\.ssh

用带格式的记事本打开id_rsa.pub，Ctrl + a复制里面的所有内容，然后进入https://github.com/settings/ssh：

将复制的内容粘贴到Key的输入框，随便写好Title里面的内容，点击Add SSH key按钮即可。

4.测试

在Git Bash中输入：

ssh -T git@github.com

如果看到：
Hi xxxxxx! You’ve successfully authenticated, but GitHub does not provide shell access.（xxxxx为你的用户名）

就说明成功了

配置Deployment

在hexo根目录文件下找到_config.yml文件，打开编辑（可使用notepad++打开），找到Deployment字段，然后按照如下修改：

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

如果使用git方式进行部署，执行npm install hexo-deployer-git –save来安装所需的插件

然后在当前目录打开命令行，输入：

hexo d

随后按照提示，分别输入自己的Github账号用户名和密码，开始上传。然后通过http://yourname.github.io/来访问自己刚刚上传的网站。

写博客、发布文章

新建一篇博客，执行下面的命令：

hexo new post "article title"

这时候在hexo根目录下\hexo\source_posts 将会看到 article title.md 文件

用MarkDown编辑器（windows平台可以使用markdown pad、有道云笔记这两个工具来写作）打开就可以编辑文章了。文章编辑好之后，运行生成、部署命令：

hexo g   // 生成
hexo d   // 部署

当然你也可以执行下面的命令，相当于上面两条命令的效果

hexo d -g #在部署前先生成

部署成功后访问你的地址，https://yourName.github.io,将可以看到生成的文章。

如何设置预览时每篇文章的高度呢

编写文章时，在文章中插入

<!--more-->

在哪里插入就从哪里截断

编辑主题配置文件，修改字段：

auto_excerpt: 
  enable: false 
  length: 150（可自行设置）

将enable设为true，之后每篇文章会自动在150处截断

到此，你的个人博客就搭建起来啦~下一篇将介绍如何更换和配置主题。