目录
  1. 1. hexo博客搭建教程以及基本配置
  2. 2. Hexo简介
  3. 3. 第一部分
    1. 3.1. Hexo搭建步骤
      1. 3.1.1. 1.安装Git
      2. 3.1.2. 2.安装nodejs
      3. 3.1.3. 3.安装hexo
      4. 3.1.4. 4.GitHub创建个人仓库
      5. 3.1.5. 5.生成SSH添加到Cithub
      6. 3.1.6. 6.将hexo部署到GitHub
  4. 4. 第二部分
    1. 4.1. 1.hexo基本配置
      1. 4.1.1. 网站
      2. 4.1.2. 网址
      3. 4.1.3. Front-matter
      4. 4.1.4. layout(布局)
      5. 4.1.5. page
      6. 4.1.6. draft
    2. 4.2. 2.更换主题
    3. 4.3. 3.git分支进行多终端工作
      1. 4.3.1. 机制
      2. 4.3.2. 上传分支
      3. 4.3.3. 更新电脑操纵
      4. 4.3.4. tips:
  5. 5. 总结
hexo博客搭建一:基本配置

hexo博客搭建教程以及基本配置

我花了大概一周的时间搭建了这个博客,过程中遇到不少的坑,下面就分享一下搭建过程,避免各位跟我遇到同样的坑。

Hexo简介

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以生成静态页面托管在github和coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细的查看。

教程分为三个部分:

  • hexo的初级搭建部署到github page上
  • hexo的基本配置、主题的应用、实现多终端工作

第一部分

Hexo搭建步骤

1.安装Git
2.安装Node.js
3.安装Hexo
4.GitHub创建个人仓库
5.生成SSH添加到GitHub
6.将hexo部署到GitHub
7.发布文章

1.安装Git

windows:到git官网上下载,Download git,下载后会有Git Bash的命令行工具,以后就用这个工具来使用git。
linux:对linux来说实在太简单了,因为最早的git就是在linux上编写的,只需要一行代码

sudo apt-get install git

安装好后,用git --version来查看一下版本

2.安装nodejs

Hexo是基于nodejs编写的,所以需要安装一下nodehs和里面的npm工具
windows:nodejs选择LTS版本就行了

linux:

sudo apt-get install nodejs
sudo apt-get install npm

安装完成后,输入如下命令检查是否安装成功

node -v
npm -v

顺便说一下,Windows在git安装好后,就可以直接使用git bash来敲命令了,不用自带的cmd,cmd有点难用

3.安装hexo

git和nodejs安装好后,就可以安装hexo了,你可以先创建一个文件夹blog,然后cd到这个文件夹下(或者在这个文件夹下直接右键git bash打开)
输入命令(Windows和linux相同)

npm install -g hexo-cli

依旧用hexo -v检查一下版本,如果没有报错就安装完成了
接下来初始化hexo

hexo init myblog

这个myblog可以自定义
然后输入如下命令

cd myblog //进入myblog文件夹
npm install

新建完成后,指定文件夹目录下有:

  • node_modules: 依赖包
  • public: 存放生成的页面
  • scaffolds: 生成文章的一些模板
  • source: 用来存放你的文章
  • themes: 主题
  • _config.yml: 博客的配置文件
hexo g //生成静态页面
hexo server //本地预览

在浏览器输入localhost:4000就可以看到你生成的博客了。
大概长这样:

ctrl+c关闭服务

4.GitHub创建个人仓库

首先,你要注册一个github账户
注册完成后,在github.com中看到你个New repository,新建仓库

创建一个和你用户名相同的仓库,后面加.github.io,只有这样,部署到GitHub page的时候才会被识别,也就xxx.github.io,xxx就是你注册GitHub的用户名


点击create repository

5.生成SSH添加到Cithub

回到git bash中

git config --global user.name "yourname" 
git config --global user.email "youremail"

这里的yourname是你GitHub的用户名,youremail是你GitHub的邮箱。
检查是否输入正确

git config user.name
git config user.email

然后创建SSH

ssh-keygent -t rsa -C "youremail"

一路回车,这个时候他会告诉你已经生成了.ssh的文件,在.ssh文件夹中会看到这三个文件

id_rsa是你这台电脑的私人秘钥,id_rsa.pub是公钥,在GitHub的setting中点击New SSH key把你的id_rsa.pub里面的信息复制进去
查看是否成功

ssh -T git@github.com

6.将hexo部署到GitHub

这一步我们将hexo和GitHub关联起来,把hexo生成的文章部署到GitHub上,打开myblog中的_config.yml,翻到最后,修改一下
YourgithubName就是你GitHub的账户

deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubNmae.github.io.git
branch: master

注意冒号后面要空格
这个时候要先安装deploy-git,也就是部署命令,这样你才能用命令部署到GitHub.

npm install hexo-deployer-git --seve

然后

hexo clean
hexo generate
hexo deploy

hexo clean是清除缓存,也可以不加
hexo generate生成静态文章,可以缩写为hexo g
hexo deploy部署文章,可以缩写为hexo d
注意deploy是要输入你的username和password
没有报错就说明部署成功了,过一会儿就可以在https://yourname.github.io这个网站看到你的博客了
这个时候我们发现每次deploy的时候都要输入username和password,我们可以打开站点配置文件_config.yml把我们之前修改的repo: https://github.com/YourgithubName/YourgithubName.github.io.git修改为

repo: git@github.com:YourgithubName/YourgithubName.github.io.git

这样就不用每次都输入username和password了。

第二部分

hexo基本配置、主题更换等

1.hexo基本配置

在myblog文件夹目录下的_config.yml,就是整个hexo框架的基本配置文件了,可以在这里修改大部分的配置文件。详细可参考官方的配置描述。

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 你的名字
language 网站使用的语言
timezone 网站时区,默认使用电脑时区

其中,description主要用于SEO,告诉搜索引擎一个关于你站点的简单描述,通常建议包含你网站的关键词。author参与用于主题显示文章的作者。

网址

参数 描述
url 网址
root 网站根目录
permalink 文章的永久链接格式
permalink_defaults 永久链接中各部分的默认值

这里需要把url改成你的网站域名

permalink,也就是你生成某个文章时的那个链接格式

比如我新建一个文章叫temp.md,那么这个时候他自动生成的地址就是
http://yoursite.com/2018/09/05/temp

以下是官方给出的示例,关于链接的变量还有很多,需要的可以去官网上查找。

参数 结果
:year/:month/:day/:title/ 2013/0714/hello-world
:year-:month-:day:title.html 2013-07-14-hello-world.html
:category/:title foo/bar/hello-world

再往下翻,中间这些都默认就好了。

theme: landscape

#Deployment
## Docs: https://hexo.io/docs/deploymen.html
deploy:
type: git
repo: <repository url>
barnch: [branch]

theme就是选择主题,也就是在theme这个文件夹下,在官网有很多主题,可以自行下载放在theme这个文件夹下,在修改主配置文件的theme参数就可以了,默认安装的是lanscape这个主题。

接下来这个deploy就是网站的部署,repo就是仓库(Repository)的简写。branch选择仓库的哪个分支。这个之前已经修改过了,不在赘述,在后面双平台部署的时候会再次用到。

Front-matter

Front-matter是文件最上方以---分隔的区域,用于指定个别文件的变量,举例来说:

---
title: Hello Word
deat: 2013/7/13 20:46:25
---

下面是预先定义的参数,你可以在模板中使用这些参数值并加以利用。

参数 描述
layout 布局
title 标题
date 建立时间
update 更新时间
comments 开启文章的评论功能
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址

其中,分类和标签需要区别一下,分类具有顺序性和层次性,也就是说Foo,Bar不等于Bar,Foo;而标签没有顺序性和层次性。

categories:
- Diary
tags:
- PS3
- Games

layout(布局)

hexo new paper

他其实是默认使用的是post这个布局,也就是source文件夹下的_post里面

Hexo有三种默认布局:postpagedraft,它们分别对应不同的路径,而你自定义的其他布局和post相同,都将存储到source/_post文件夹。

布局 路径
post source/_post
page source
draft source/_drafts

而new这个命令其实是:

hexo new [layout]<title>

只不过这个layout默认是post罢了。

page

如果你想另起一页,那就可以使用

hexo new page board

系统会自动给你的source文件夹下创建一个board文件夹,以及board文件夹中的index.md,这样你访问的board对应的链接就是http://xxx.xxx/board

draft

draft是草稿的意思,也就是你想写文章,又不希望被看到,那么可以

hexo new draft newpage

这样会在source/_draft中新建一个newpage.mad文件,如果你的草稿文件写的过程中,想要预览一下,那么可以使用

hexo server --draft

如果你的草稿写完了,想要发表到post中

hexo publish draft newpage

就会自动把newpage.md发送到post中。

2.更换主题

到这里,如果你觉得默认的landscape主题不好看,那么可以在官网的主题中,选择你喜欢的一个主题修改就可以啦。

这里有200多个主题可选,最受欢迎的也就那么几个,不如NexT主题,非常的简洁好看,大多数人都选择这个,关于这个的教程也比较多。我用的是butterfly这个主题,这个主题比较炫酷,我会在后面详细的讲解butterfly这个主题的一些配置。

3.git分支进行多终端工作

问题来了,如果你现在在你的笔记本上写博客,部署在了网站上,那么你在家里用台式主机,或者办公室的台式机,发现你电脑里面没有博客文件,或者要换电脑了,最后不知道怎么移动文件,怎么办?

在这里我们就可以利用git的分支系统进行多终端工作了,这样每次打开不一样的电脑,只需要进行简单的配置在github上把文件同步下来,就可以无缝操作了。

机制

机制是这样的,由于hexo d上传部署到github的其实是hexo编译后的文件,是用来生成网页的,不包含源文件。


可以看到,并没有source等源文件在内

也就是长传的是本地目录里自动生成的.deploy_git里面。
其他文件,包括我们写在source里面的,和配置文件,主题文件,都没有上传到github
所以可以利用git的分支管理,将源文件上传至github的另一个分支即可。

上传分支

首先,先在github上新建一个分支,然后在这个仓库的setting中,选择默认分支为hexo分支(每次同步的时候就不用制定分之,比较方便)。

然后在本地的任意目录夏,打开git bsah

git clone git@github.cm:yourname/yourname.github.io.git

将其克隆到本地,因为默认分支已经设成了hexo,所以clone时只克隆了hexo。

接下来在克隆到本地的yourname.gitbhu.io中,把除了.git文件夹外的所有文件都删掉

把之前我们写的博客源文件全部复制过来,除了.deploy_git。复制过来的源文件应该有一个.gitignore,用来忽略一些不需要的文件,如果没有的话,自己新建一个,在里面写上如下,表示这类文件不需要git:

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

注意,如果你之前克隆过theme中的主题文件,那么应该把主题文件中的.git文件夹删掉,因为git不能嵌套上传,最好是显示影藏文件,检查一下有没有,否则上传的时候会出错,导致你的主题文件无法上传,这样你的配置就在别的电脑上用不了了。

而后

git add
git commit -m "add branch"
git push

这样就上传完了,可以去你的github上看一看hexo分支有没有上传上去,其中mode_modulespublicdb.json已经被忽略了,没有关系,不需要上传,因为在别的电脑上需要重新输入命令安装。

更新电脑操纵

一样的,跟之前的环境搭建一样

  • 安装git
    sudo apt-get install git
  • 设置git全局邮箱和用户名
    git config --global user.name "yourgithubname"
    git config --global user.email "yourgithubemail"
  • 设置 ssh key
    ssh-keygen -t rsa -C "youremail"
    #验证是否成功
    ssh -T git@github.com
  • 安装nodejs
    sudo apt-get install nodejs
    sudo apt-get install npm
  • 安装hexo
    sudo npm install hexo-cli -g
    但是不需要初始化了

直接在任意文件夹下

git clone git@..........

然后进入克隆到的文件夹:

cd xxx.github.io
npm install
npm install hexo-deployer-git --seve

生成,部署:

hexo g
hexo d

然后就可以开始写你的新博客了

hexo new newpage

tips:

1.不要忘了,每次写完最好都把源文件上传一下

git add .
git commit -m "xxx"
git push

2.如果是已经编辑过的电脑上,已经有了clone文件夹了,那么,每次只要和远端同步一下就可以了

git pull

总结

到这里我们的博客差不多已经做完了。我也是参考其他博主的博客搭建的。

在后面会对Butterfly主题配置进行一个详细的讲解,以及域名绑定在GitHub Page和Coding Page双平台部署实现国内外分析的详细讲解

文章参考:https://blog.csdn.net/sinat_37781304/article/details/82729029

文章作者: Corey
文章链接: http://www.c-hasel.cn/2019/11/29/hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E4%B8%80/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Corey's Blog
打赏
  • 微信
  • 支付宝

评论