博客制作(博客制作心得)

作者：咻咻ing作者:嚎叫ing

博客:https://xiuxiuing.gitee.io/blog

序

上次讲了“优秀的程序员为什么要写博客？”今天给大家带来的是嚎叫的投稿，如何建立个人博客。当然，除了自建，还有很多优秀的写作平台。(CSDN，博客花园，掘金...)

用Gitee+Hexo建立个人博客

为什么用Gitee而不用GitHub。

目前国内访问GitHub比较慢，可能会被屏蔽，所以Gitee建立个人博客。Gitee类似于国内版的GitHub，访问速度有保证。

环境要求

饭桶

开发

默认情况下，您已经安装了Git和NodeJS(建议使用cnpm)

Git安装教程:

https://www . liaoxuefeng . com/wiki/0013739516305929606 DD 18361248578 c67b 8067 c8 c 017 b 000/0013739628703354d 8 c 6 c 01 c 904 c 7d 9 ff 056 AE 23 da 865 a 000

Nodejs安装教程:

https://www.runoob.com/nodejs/nodejs-install-setup.html

Cnpm使用教程:

https://xiuxiuing.gitee.io/blog/2018/08/25/cnpm/

开始建造

1.安装Hexo

打开shell终端并输入命令:

npm安装-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":"https://cdn.npm.taobao.org/dist/fsevents"}[24/27] nunjucks@^3.1.2 installed at node_modules/_nunjucks@3.1.3@nunjucks[25/27] swig-templates@^2.0.2 installed at node_modules/_swig-templates@2.0.2@swig-templates[26/27] hexo-fs@^0.2.0 installed at node_modules/_hexo-fs@0.2.3@hexo-fs[27/27] warehouse@^2.2.0 installed at node_modules/_warehouse@2.2.0@warehouseexecute post install 2 scripts...[1/2] scripts.postinstall nunjucks@^3.1.2 run "node postinstall-build.js src"[1/2] scripts.postinstall nunjucks@^3.1.2 finished in 109ms[2/2] scripts.install hexo-fs@0.2.3 ? chokidar@1.7.0 ? fsevents@^1.0.0 run "node install"[fsevents] Success: "/usr/local/lib/node_modules/hexo/node_modules/_fsevents@1.2.4@fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installedPass --update-binary to reinstall or --build-from-source to recompile[2/2] scripts.install hexo-fs@0.2.3 ? chokidar@1.7.0 ? fsevents@^1.0.0 finished in 306msdeprecate titlecase@^1.1.2 no longer maintainedRecently updated (since 2018-08-01): 1 packages (detail see file /usr/local/lib/node_modules/hexo/node_modules/.recently_updates.txt)2018-08-06→ resolve@1.8.1 ? path-parse@^1.0.5(1.0.6) (14:32:36)All packages installed (280 packages installed from npm registry, used 4s, speed 1.65MB/s, json 236(1.51MB), tarball 5.8MB)[hexo@3.7.1] link /usr/local/bin/hexo@ -> /usr/local/lib/node_modules/hexo/bin/hexo

注意:如果提示权限错误，请在命令前添加sudo。Cnpm是淘宝的开源镜像，国内访问比npm快。

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' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'Cloning into '/work/Hexo/themes/landscape'...^Cwarning: Clone succeeded, but checkout failed.You can inspect what was checked out with 'git status'and retry the checkout with 'git checkout -f HEAD'INFO See you again

初始化后Hexo的目录结构:

3.获取博客主题

安装风格分析:NPM安装hexo-渲染器-scss-保存

$ 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 https://github.com/sass/node-sass/releases/download/v4.9.3/darwin-x64-64_binding.nodeDownload complete ?? ? :Binary saved to /Users/wang/HexoNew/node_modules/node-sass/vendor/darwin-x64-64/binding.nodeCaching binary to /Users/wang/.npm/node-sass/4.9.3/darwin-x64-64_binding.node> node-sass@4.9.3 postinstall /Users/wang/HexoNew/node_modules/node-sass> node scripts/build.jsBinary found at /Users/wang/HexoNew/node_modules/node-sass/vendor/darwin-x64-64/binding.nodeTesting binaryBinary is fine+ hexo-renderer-scss@1.2.0added 187 packages from 167 contributors and audited 3576 packages in 24.221sfound 0 vulnerabilities

克隆主题:git clone https://gitee.com/xiuxiuing/hexo-theme-even主题/even

/work/Hexo $ git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/evenCloning into 'themes/even'...remote: Counting objects: 136, done.remote: Compressing objects: 100% (123/123), done.remote: Total 136 (delta 4), reused 128 (delta 2)Receiving objects: 100% (136/136), 264.27 KiB | 556.00 KiB/s, done.Resolving deltas: 100% (4/4), done.

克隆完成后，可以看到/Hexo/themes目录下的风景甚至文件夹。

我们要用的主题都放在这个目录里，风景主题默认是Hexo用的。由于Hexo初始化第二步中的主题没有克隆成功，所以我们在这一步中克隆了even主题，然后我们将使用even主题进行演示。

要获得更多的主题，你可以在网站上选择你喜欢的主题:https://hexo.io/themes/,，并按照这个步骤克隆它。

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 http://localhost:4000/. Press Ctrl+C to stop.

在浏览器中输入http://localhost:4000/`查看效果。

将博客部署到Gitee

1.创建Gitee帐户

去CodeCloud:在https://gitee.com/. code cloud上申请账号注册和国内版的GitHub差不多，所以操作界面和GitHub差不多。还有一些国内的东西，这里就不介绍了，我自己研究一下。

2.创建项目

创建完成后，将项目地址复制到项目中。

3.在_ config.yml中配置Git。

deploy:type: gitrepo: https://gitee.com/xiuxiuing/blog.gitbranch: master

注意:冒号后面必须有空大小写，否则无法正确识别。

4.发布到Gitee

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

输入命令hexoclean & & amphexo g & amp& ampHexo d发表博客。第一次，您需要在shell中输入您的帐号和密码。

5.Gitee页面设置

选择项目服务中的页面选项。

选择主分支，然后单击部署/更新。

过一会儿，博客就发布成功了。访问博客地址:https://xiuxiuing.gitee.io/blog预览在线博客！！！

如果博客风格不对，需要在_config.yml中配置博客地址和路径:

url: https://xiuxiuing.gitee.io/blog/root: /blog

执行命令hexoclean & & amphexo g & amp& ampHexo d就可以了。

至此，我们的博客已经建立起来了。

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

我已经成功地在Gitee上建立了自己的博客，但是这个博客还相当初级。

接下来，我将介绍如何开始写作以及偶数主题的常见配置。

如何开始写作？

博客已经建好了。虽然它的功能很简单，但是可以开始写。

新文章

使用命令创建新项目:

$ hexo new [layout] <title>

布局就是文章的布局。默认是post，可以不去管。

Title是文章的标题和文件的名称，存储在source/_posts下。

$ hexo new demo

demo.md文件在source/_post目录中自动生成。

使用MarkDown编辑器打开文件并开始编写。

前台设置

Front-matter是文章顶部用-分隔的区域，用来指定文章的变量设置。例如:

title: demodate: 2018-08-23 15:13:30tags:---

以下是预定义的参数，您可以在模板中使用这些参数并加以利用。

物品的分类和标签

只有文章支持分类和标签，可以在前置设置。在其他系统中，分类和标注听起来差不多，但在Hexo中两者有明显的区别:分类是顺序的，有层次的，即Foo，Bar不等于Bar，Foo；；标签没有顺序或层次。例如，在demo.md中添加以下设置:

categories:- Demotags:- 示例

它将分别在博客的标签和分类下增加我们的配置效果:

标签配置效果:

分类效果:

注意:商品分类和标签设置将自动填入菜单分类和标签中。

文章截断

增加

而且会在

如图所示:

定制商品简介

您可以在文章标题信息中添加描述字段，并填写自定义文章简要描述。

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

偶数主题的常见配置

我们博客完成后的Hexo的目录结构如下:

.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts├── themes| ├── even| └── landscape

我们偶数主题的配置主要是在偶数目录中进行的。配置文件_config.yml具有以下目录结构:

.├── _config.yml├── package.json├── scaffolds├── source| ├── css| └── js├── languages| ├── default.yml| └── zh-cn.yml|── layout

修改主题颜色

该主题有5种可选颜色:

修改主题配置文件中主题字段的颜色属性，以更改主题颜色:

# ===========================================# 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: #xxxxxx;

可以在_custom.scss中覆盖_variables.scss中的样式变量，从而自定义主题样式。

添加类别页面

使用命令创建新的类别页面:

hexo new page categories

生成的categories/index.md文件被设置为categories:

title: categorieslayout: categories

默认情况下打开注释(如果使用Duoduo或Disqus)，添加注释字段并将其设置为false以将其关闭。

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

# ===========================================# Menu Settings# ===========================================menu:Home: /Archives: /archives/Categories: /categories/

添加选项卡页面

使用命令创建新的标签页面:

hexo new page tags

将自动生成以下目录:

生成的tags/index.md文件设置为tags:

title: tagslayout: tags

默认情况下打开注释，添加注释字段并将其设置为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官网，进入注册页面进行注册。邮箱激活完成后，点击头像进入控制台页面。

创建新的应用程序

创建一个新的应用程序，并创建一个名为Counter的类(注意，权限选择是无限制的)

配置app_id和app_key

您创建的应用中的设置-->:检查应用中的app_id和app _ Key。

修改主题配置文件_config.yml，填写app_id和app_key:

# LeanCloudleancloud:app_id:app_key:

设置Web安全域名

您创建的应用程序中的设置-->:在安全中心中设置一个Web安全域名，并将您的域名添加到Web安全域名中(如果本地服务也希望查看流量，请添加http://localhost:4000/)

添加博客流量分析

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

添加网站

打开百度网站统计页面，注册相关账号信息，进入管理页面，点击添加网站，填写相关信息:

代码获取

在代码采集页面获取新的统计代码示例:

<script>var _hmt = _hmt || ;(function {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?6f2041754dc216e6973762726c19d178";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);});</script>

6f 2041754 DC 216 e 6973762726 c 19d 178和我们百度统计分析的APPID差不多。

配置百度统计APPID

修改主题配置文件_config.yml，填写APPID:

# Baidu Analyticsbaidu_analytics: 6f2041754dc216e6973762726c19d178

配置好之后，编译hexo -g hexo -d，发布我们的博客。

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

添加成功后，20分钟左右就可以看到百度统计后台的数据。

设置文章奖励

通过主题配置文件中的奖励字段打开/关闭它:

reward:enable: trueqrCode:wechat: /image/reward/wechat.pngalipay: /image/reward/alipay.png

支持微信和支付宝，在二维码下修改对应的二维码图片链接，或者直接设置为图片的网络链接。

当奖励功能打开时，您可以通过文章标题进行降价:

reward: false

关闭这篇文章的奖励。相反，当打赏功能关闭时，可以在文章中单独开启。

在底层建立社会联系

目前支持:电子邮件，堆栈溢出，Twitter，脸书，GitHub，微博和知乎。

修改后的主题配置文件中social字段下的各个字段都是打开的，在空时关闭:

social:email: your@email.comstack-overflow:twitter:facebook:github:weibo:zhihu:

主题使用自定义图标字体图标库。

设置文章版权

修改主题配置文件中的版权字段开/关:

copyright:enable: true# https://creativecommons.org/license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'

显示默认作者、来源、链接和版权说明，可通过copyright.lincese自定义

版权许可证的值可以是HTML。

当文章的版权信息打开时，您可以使用文章降价标题:

copyright: false

关闭单篇文章的版权信息。

个人博客效果参考:https://xiuxiuing.gitee.io/blog/