此为转载文章,内容为实践过内容,原文链接在底部~
使用Gitee+Hexo搭建个人博客
为何使用Gitee而不是GitHub。
目前国内访问GitHub速度慢,还可能被墙,所以Gitee来构建个人博客。Gitee类似国内版的GitHub,访问速度有保证。
环境要求
- Git
- NodeJs
- 默认你已经安装了Git 和 NodeJS (推荐使用cnpm)
开始搭建
1.安装Hexo
打开 shell 终端,输入命令:
npm install -g hexo
注:如果提示权限错误,命令前加sudo,cnpm 是淘宝的开源镜像,国内访问比npm快。
2.初始化Hexo
在你的电脑上创建Hexo文件夹,在shell终端中切换到Hexo目录,输入命令
hexo init
3. 获取博客主题
3.1.安装样式解析
npm install hexo-renderer-scss --save
3.2.克隆主题
git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even
克隆完成后,在/Hexo/themes目录下,可以看到 landscape和even 两个文件夹。
我们所要使用的主题都是放在这个目录下,Hexo默认使用的是landscape主题,由于第二步Hexo初始化时主题没有clone成功,所以我们这一步克隆了even主题,接下来会使用even主题进行演示。
想获取更多主题,可在网站:https://hexo.io/themes/ 选择自己喜欢的主题,按照此步的步骤clone下来。
4._config.yml对博客进行基础配置
_config.yml文件修改,保存
title: 浩原君的博客
subtitle:
description:
keywords:
author: 浩原君
language:
timezone:
......
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: even
5. 本地预览博客
编译项目,输入命令:
hexo g
运行项目,输入命令:
hexo s
在浏览器中输入http://localhost:4000/就可以看到效果啦
部署博客到Gitee上
1. 创建Gitee账号
到码云:https://gitee.com/ 上申请注册账号,码云类似国内版的GitHub,所以操作界面跟GitHub差不多,多了一些国产化的东西,这里不做更多介绍了,自己研究下。
2. 创建项目
创建完成后,在项目中复制项目地址。
3. 在_config.yml中配置Git
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://gitee.com/alanwhy/blog.git
branch: master
注意:冒号后面一定要有空格,否则不能正确识别。
4. 发布到Gitee
输入命令,安装自动部署发布工具
npm install hexo-deployer-git --save
输入命令, 发布博客,首次发布需要在shell中输入账号和密码。
hexo clean && hexo g && hexo d
5. Gitee Pages设置
在项目的服务中选择Pages选项
稍等一会儿博客就发布成功啦,访问博客地址:https://alanwhy.gitee.io/blog/,就可预览在线博客啦!!!
如果博客的样式不对,则需要在_config.yml中配置下博客地址和路径:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://alanwhy.gitee.io/blog/
root: /blog
再执行命令
hexo clean && hexo g && hexo d
就可以啦。
至此,我们的博客就搭建完成。
在/Hexo/source/_posts目录下就可以写我们的博客。
接下来讲介绍 如何开始写作 和 Even主题的常用配置 。
如何开始写作
新建文章
使用命令来新建一篇文章:
hexo new [layout]
layout 是文章的布局,默认为post,可以先不写。
例如:创建名为demo的文章
hexo new demo
则在source/_post目录下自动生成了demo.md文件
使用MarkDown编辑器打开文件就可以开始写作了。
Front-matter 设置
文章分类和标签
只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。在demo.md增加如下设置,示例:
categories:
- Demo
tags:
- 示例
文章截断
在文章内容中添加
即可在首页显示时只显示其之上的内容。
并且会在
添加一个 Read more(阅读更多) 的链接。
Even主题常用配置
我们博客搭建完成后Hexo的目录结构如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
├── themes
| ├── even
| └── landscape
我们Even主题的配置则主要在even目录下进行,配置文件_config.yml,目录结构如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── css
| └── js
├── languages
| ├── default.yml
| └── zh-cn.yml
|── layout
1、修改主题颜色
修改主题配置文件中 theme 字段的 color 属性可改变主题色:
# ===========================================
# Theme Settings
# ===========================================
# color: Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet
color: Cobalt Blue
除了能够修改为主题自带的 5 种颜色之外,还可以使用自定义的其他颜色。
在 source/css/_custom/_custom.scss 中添加样式变量 $theme-color 修改主题色。
$theme-color: #xxxxxx;
同时需要修改 $deputy-color 主题副颜色,该值主要使用在代码块背景以及文章目录。
$deputy-color: #xxxxxx;
_variables.scss 中的样式变量都可以在 _custom.scss 中进行覆盖,从而自定义主题样式。
2、添加分类页
使用命令新建一个 categories 页面:
hexo new page categories
编辑生成的 categories/index.md 文件,设置布局为 categories:(默认开启评论(如果使用了多说或 Disqus),添加 comments 字段并设置为 false 可关闭。)
title: categories
layout: categories
在主题配置文件(_config.yml)中添加链接:
# ===========================================
# Menu Settings
# ===========================================
menu:
Home: /
Archives: /archives/
Categories: /categories/
3、添加标签页
与步骤2中提到的思路几乎一样,以下提供命令及修改配置项
hexo new page tags
title: tags
layout: tags
# ===========================================
# Menu Settings
# ===========================================
menu:
Home: /
Archives: /archives/
Tags: /tags
4、添加自定义页面
与步骤2中提到的思路几乎一样,以下提供命令及修改配置项
hexo new page about
title: about
layout: page
# ===========================================
# Menu Settings
# ===========================================
menu:
Home: /
Archives: /archives/
About: /about/
发布博客后,在首页的菜单中就可以看到我们设置的标签 分类 关于菜单啦!!!
5、设置文章打赏
通过主题配置文件中的 reward 字段开启/关闭:
reward:
enable: true
qrCode:
wechat: /image/reward/wechat.png
alipay: /image/reward/alipay.png
6、设置底部社交链接
目前支持:Email, Stack Overflow, Twitter, Facebook, Github, 微博以及知乎
修改主题配置文件中的 social 字段下的各个字段开启,为空时即为关闭:
social:
email: your@email.com
stack-overflow:
twitter:
facebook:
github:
weibo:
zhihu:
主题使用的是自定义的 iconfont 图标库。
7、设置文章版权
修改主题配置文件中的 copyright 字段开启/关闭:
copyright:
enable: true
# https://creativecommons.org/
license: '本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可'
默认显示作者,来源,链接以及版权说明,版权说明可通过 copyright.lincese 自定义。
copyright.license 的值可以是 HTML
个人博客效果参考:
https://alanwhy.gitee.io/blog/
转载:https://mp.weixin.qq.com/s?__biz=MzIwMzYwMTk1NA==&mid=2247490500&idx=1&sn=c523af99e686ecbe1d3f66f1cae7fb83&chksm=96cdba89a1ba339f569e3b5f8944b22a9cfafe40533c2181e83a85baefccc040460a2535ca6f&mpshare=1&scene=23&srcid=0828c8mTyqg5fgKqGCK2xOcF#rd