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

作者:咻咻ing

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

博客:}

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

前言

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

上次讲了《为什么优秀的程序员都写博客?》今天要给大家带来咻咻ing的投稿,如何搭建一个个人博客。当然,除了自己搭建还有很多优秀的写作平台。(CSDN,博客园,掘金 ….)

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

使用Gitee+Hexo搭建个人博客

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

为何使用Gitee而不是GitHub。

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

目前国内访问GitHub速度慢,还可能被墙,所以Gitee来构建个人博客。Gitee类似国内版的GitHub,访问速度有保证。

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

环境要求

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

Git

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

NodeJs

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

默认你已经安装了Git 和 NodeJS (推荐使用cnpm)

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

Git安装教程:

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

}

如何搭建一个免费的个人博客?Nodejs安装教程:

如何搭建一个免费的个人博客?}

cnpm使用教程:如何搭建一个免费的个人博客?

}
如何搭建一个免费的个人博客?

开始搭建

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

1.安装Hexo

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

打开 shell 终端,输入命令:

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

npm install -g hexo

如何搭建一个免费的个人博客?$ sudo cnpm install -g hexoPassword:Downloading hexo to /usr/local/lib/node_modules/hexo_tmpCopying /usr/local/lib/node_modules/hexo_tmp/_hexo@3.7.1@hexo to /usr/local/lib/node_modules/hexoInstalling hexo\’s dependencies to /usr/local/lib/node_modules/hexo/node_modules[1/27] abbrev@^1.0.7 installed at node_modules/_abbrev@1.1.1@abbrev[2/27] archy@^1.0.0 installed at node_modules/_archy@1.0.0@archy[3/27] hexo-i18n@^0.2.1 installed at node_modules/_hexo-i18n@0.2.1@hexo-i18n[4/27] js-yaml@^3.6.1 existed at node_modules/_js-yaml@3.12.0@js-yaml[5/27] bluebird@^3.4.0 installed at node_modules/_bluebird@3.5.1@bluebird[6/27] chalk@^2.3.1 installed at node_modules/_chalk@2.4.1@chalk[7/27] hexo-front-matter@^0.2.2 installed at node_modules/_hexo-front-matter@0.2.3@hexo-front-matter[8/27] minimatch@^3.0.4 installed at node_modules/_minimatch@3.0.4@minimatch[9/27] pretty-hrtime@^1.0.2 installed at node_modules/_pretty-hrtime@1.0.3@pretty-hrtime[10/27] hexo-util@^0.6.3 installed at node_modules/_hexo-util@0.6.3@hexo-util[11/27] hexo-cli@^1.1.0 installed at node_modules/_hexo-cli@1.1.0@hexo-cli[12/27] resolve@^1.5.0 installed at node_modules/_resolve@1.8.1@resolve[13/27] strip-indent@^2.0.0 installed at node_modules/_strip-indent@2.0.0@strip-indent[14/27] strip-ansi@^4.0.0 installed at node_modules/_strip-ansi@4.0.0@strip-ansi[15/27] text-table@^0.2.0 installed at node_modules/_text-table@0.2.0@text-table[16/27] tildify@^1.2.0 existed at node_modules/_tildify@1.2.0@tildify[17/27] titlecase@^1.1.2 installed at node_modules/_titlecase@1.1.2@titlecase[18/27] moment@^2.19.4 installed at node_modules/_moment@2.22.2@moment[19/27] moment-timezone@^0.5.14 installed at node_modules/_moment-timezone@0.5.21@moment-timezone[20/27] hexo-log@^0.2.0 installed at node_modules/_hexo-log@0.2.0@hexo-log[21/27] swig-extras@0.0.1 installed at node_modules/_swig-extras@0.0.1@swig-extras[22/27] lodash@^4.17.5 installed at node_modules/_lodash@4.17.10@lodash[23/27] cheerio@0.22.0 installed at node_modules/_cheerio@0.22.0@cheeriofsevents@1.2.4 download from binary mirror: {\”module_name\”:\”fse\”,\”module_path\”:\”./lib/binding/{configuration}/{node_abi}-{platform}-{arch}/\”,\”remote_path\”:\”./v{version}/\”,\”package_name\”:\”{module_name}-v{version}-{node_abi}-{platform}-{arch}.tar.gz\”,\”host\”:\”}

2.初始化Hexo

在你的电脑上创建Hexo文件夹,在shell终端中切换到Hexo目录,输入命令 hexo init

$ cd /work/Hexo/work/Hexo $ hexo initINFO Cloning hexo-starter to /work/HexoCloning into \’/work/Hexo\’…remote: Counting objects: 65, done.remote: Total 65 (delta 0), reused 0 (delta 0), pack-reused 65Unpacking objects: 100% (65/65), done.Submodule \’themes/landscape\’ (}

3. 获取博客主题

安装样式解析:npm install hexo-renderer-scss –save

$ npm install hexo-renderer-scss –save> node-sass@4.9.3 install /Users/wang/HexoNew/node_modules/node-sass> node scripts/install.jsDownloading binary from }

/work/Hexo $ git clone }

我们所要使用的主题都是放在这个目录下,Hexo默认使用的是landscape主题,由于第二步Hexo初始化时主题没有clone成功,所以我们这一步克隆了even主题,接下来会使用even主题进行演示。

想获取更多主题,可在网站:}

4. _config.yml对博客进行基础配置

_config.yml文件修改,保存

5. 本地预览博客

编译项目,输入命令:hexo g运行项目,输入命令:hexo s

$ hexo gINFO Start processingINFO Files loaded in 186 msINFO Generated: archives/2018/08/index.htmlINFO Generated: archives/index.htmlINFO Generated: archives/2018/index.htmlINFO Generated: index.htmlINFO Generated: 2018/08/08/hello-world/index.htmlINFO 5 files generated in 242 ms$ hexo sINFO Start processingINFO Hexo is running at }

部署博客到Gitee上

1. 创建Gitee账号

到码云:}

2. 创建项目

创建完成后,在项目中复制项目地址。

3. 在_config.yml中配置Git

deploy:type: gitrepo: }

4. 发布到Gitee

输入命令npm install hexo-deployer-git –save 安装自动部署发布工具

输入命令hexo clean && hexo g && hexo d 发布博客,首次发布需要在shell中输入账号和密码。

5. Gitee Pages设置

在项目的服务中选择Pages选项

选择 master分支,点击 部署/更新

稍等一会儿博客就发布成功啦,访问博客地址:}

如果博客的样式不对,则需要在_config.yml中配置下博客地址和路径:

url: }

至此,我们的博客就搭建完成。

在/Hexo/source/_posts目录下就可以写我们的博客。

已经成功在Gitee上搭建完成了自己的博客,但是这个博客还是比较简陋的。

接下来讲介绍 如何开始写作 和 Even主题的常用配置 。

如何开始写作

博客搭建完成,虽然功能很简单,但是已经可以开始写作。

新建文章

使用命令来新建一篇文章:

$ hexo new [layout] <title>layout 是文章的布局,默认为post,可以先不写。

title 是文章的标题,也是文件的名字,存储在source/_posts下。

$ hexo new demo则在source/_post目录下自动生成了demo.md文件

使用MarkDown编辑器打开文件就可以开始写作了。

Front-matter 设置

Front-matter 是文章最上方以 — 分隔的区域,用于指定文章的变量设置,举例来说:

title: demodate: 2018-08-23 15:13:30tags:—以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。

文章分类和标签

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

categories:- Demotags:- 示例则会在博客的标签和分类下分别增加我们的配置效果:

标签配置效果:

分类配置效果:

说明:文章分类和标签的设置,会自动归档的菜单的分类和标签中。

文章截断

在文章内容中添加 <!– more –> 即可在首页显示时只显示其之上的内容。

并且会在 <!– more –> 添加一个 Read more 的链接。

如图:

自定义文章简述

可在文章头信息中添加 description 字段,并填写自定义的文章简述。

就可以在首页显示文章简述而不显示文章内容, 并自动添加阅读更多的跳转链接。

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修改主题颜色

主题自带了 5 种可选的颜色:

修改主题配置文件中 theme 字段的 color 属性可改变主题色:

# ===========================================# Theme Settings# ===========================================# theme styling# color: Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violettheme:color: Default除了能够修改为主题自带的 5 种颜色之外,还可以使用自定义的其他颜色。

在 source/css/_custom/_custom.scss 中添加样式变量 $theme-color 修改主题色。

$theme-color: #xxxxxx;同时需要修改 $deputy-color 主题副颜色,该值主要使用在代码块背景以及文章目录。

$deputy-color: #xxxxxx;_variables.scss 中的样式变量都可以在 _custom.scss 中进行覆盖,从而自定义主题样式。

添加分类页

使用命令新建一个 categories 页面:

hexo new page categories编辑生成的 categories/index.md 文件,设置布局为 categories:

title: categorieslayout: categories默认开启评论(如果使用了多说或 Disqus),添加 comments 字段并设置为 false 可关闭。

在主题配置文件(_config.yml)中添加链接:

# ===========================================# Menu Settings# ===========================================menu:Home: /Archives: /archives/Categories: /categories/添加标签页

使用命令新建一个 tags 页面:

hexo new page tags 则会自动生成如下目录:

编辑生成的 tags/index.md 文件,设置布局为 tags:

title: tagslayout: tags默认开启评论,添加 comments 字段并设置为 false 可关闭。

在主题配置文件(_config.yml)中添加链接:

# ===========================================# Menu Settings# ===========================================menu:Home: /Archives: /archives/Tags: /tags添加自定义页面

使用命令新建一个自定义页面(以添加关于页为例):

hexo new page about则会自动生成如下目录:

编辑生成的 about/index.md 文件,设置布局为 page:

title: aboutlayout: page关于页面的内容,个人相关介绍也是在此页面进行编辑。

# ===========================================# Menu Settings# ===========================================menu:Home: /Archives: /archives/About: /about在使用的语言文件下添加对应的字段(默认为 languages/default.yml):

menu:home: Homearchives: Archivestags: Tagscategories: Categoriesabout: About发布博客后,在首页的菜单中就可以看到我们设置的标签 分类 关于菜单啦!!!

添加文章访问量统计

文章访问量 阅读次数 统计通过 LeadCloud 支持

配置LeanCloud

打开LeanCloud官网,进入注册页面注册。完成邮箱激活后,点击头像,进入控制台页面

创建新应用

创建一个新应用,并创建名称为 Counter 的 Class(注意权限选择无限制)

配置 app_id 与 app_key

在你所创建的应用的 设置->应用Key 中查看 app_id 与 app_key

修改主题配置文件 _config.yml,填入 app_id 与 app_key:

# LeanCloudleancloud:app_id:app_key:设置 Web 安全域名

在你所创建的应用的 设置->安全中心 中设置 Web 安全域名 添加你的域名到 Web 安全域名中(若本地服务也想看到访问量,添加 }

添加博客流量分析

博客流量统计、访客地域分布、来源等数据统计通过 百度网站统计 支持

新增网站

打开百度网站统计页面,注册相关账号信息,进入到管理页面,点击新增网站,填入相关信息:

代码获取

在代码获取页面获取到新版统计代码示例:

<script>var _hmt = _hmt || ;(function {var hm = document.createElement(\”script\”);hm.src = \”}

配置百度统计APPID

修改主题配置文件 _config.yml,填入 APPID:

# Baidu Analyticsbaidu_analytics: 6f2041754dc216e6973762726c19d178配置完成后执行hexo -g hexo -d编译发布我们的博客。

可以在百度统计分析的代码安装检查页面,点击检查,判断我们的百度分析是否添加成功。

添加成功后,差不多20分钟后就可以看到百度统计后台的数据了.

设置文章打赏

通过主题配置文件中的 reward 字段开启/关闭:

reward:enable: trueqrCode:wechat: /image/reward/wechat.pngalipay: /image/reward/alipay.png支持微信以及支付宝,修改 qrCode 下对应的二维码图片链接,也可以直接设置成图片的网络链接。

当开启打赏功能时,可通过文章 Markdown 头部:

reward: false关闭该篇文章的打赏。反之,当打赏功能关闭时,可以在文章中单独开启。

设置底部社交链接

目前支持:Email, Stack Overflow, Twitter, Facebook, Github, 微博以及知乎

修改主题配置文件中的 social 字段下的各个字段开启,为空时即为关闭:

social:email: your@email.comstack-overflow:twitter:facebook:github:weibo:zhihu:主题使用的是自定义的 iconfont 图标库。

设置文章版权

修改主题配置文件中的 copyright 字段开启/关闭:

copyright:enable: true# }

copyright.license 的值可以是 HTML

当文章版权信息开启时,可通过文章 Markdown 头部:

copyright: false进行单篇文章版权信息的关闭。

个人博客效果参考:}

未经允许不得转载:搜热门主机 » 如何搭建一个免费的个人博客?

赞 (0)