美文网首页
【转】如何搭建一个免费的个人博客?

【转】如何搭建一个免费的个人博客?

作者: alanwhy | 来源:发表于2018-09-01 13:20 被阅读196次

此为转载文章,内容为实践过内容,原文链接在底部~

使用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选项

Pages选项.png
稍等一会儿博客就发布成功啦,访问博客地址: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] <title>

layout 是文章的布局,默认为post,可以先不写。
例如:创建名为demo的文章

hexo new demo

则在source/_post目录下自动生成了demo.md文件
使用MarkDown编辑器打开文件就可以开始写作了。

Front-matter 设置

Front-matter.png
文章分类和标签

只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。在demo.md增加如下设置,示例:

categories:
- Demo
tags:
- 示例
文章截断

在文章内容中添加

<!-- more --> 

即可在首页显示时只显示其之上的内容。
并且会在

 <!-- more --> 

添加一个 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: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'

默认显示作者,来源,链接以及版权说明,版权说明可通过 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

相关文章

网友评论

      本文标题:【转】如何搭建一个免费的个人博客?

      本文链接:https://www.haomeiwen.com/subject/wjaywftx.html