建立自己的博客

最新推荐文章于 2023-09-25 12:54:36 发布

BookIdiot

最新推荐文章于 2023-09-25 12:54:36 发布

阅读量622

点赞数 1

本文链接：https://blog.csdn.net/JH0lmes/article/details/82916951

版权

建立博客有的人用Hexo，有的人用Jekyll，看网上大多数人推荐Hexo，下面就用Hexo建立自己的博客，整理如下，以备查阅。

欢迎访问我的博客：JHolmes

1.安装配置环境

整个博客框架是基于node.js的，所以需要安装node.js，Windows Installer 64-bit，一路next即可，Node.js 的包管理器 npm（node package manager），是全球最大的开源库生态系统，安装 Node.js 时会自动安装 npm，之后要通过 npm 来安装 Hexo。查看是否安装成功

node -v
npm -v

Git用来将hexo的相关文件部署到Github上去，安装过程同样一路Next，GIt官网下载地址，查看是否安装成功

git --version

安装hexo

npm install hexo-cli -g
npm install hexo --save
hexo -v      #查看是否安装成功

hexo init    #初始化网站--------很慢，耐心等待！！！   
npm install  #自动安装需要的组件
hexo g       #generate   
hexo s       #server 启动本地服务器
复制网址 http://localhost:4000 查看网站

其他命令
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
hexo new "文章名"        #新建文章
hexo new page "页面名"   #新建页面

注意 http://localhost:4000 这个网址只能在本地查看，别人并不能看到，想要别人看到，必须将这些文件部署到Github上去。

建立GitHub账号，右上角加号点击New repository，Repository name下填写 YourName.github.io，然后点击public，点击create repository。

配置Deployment，修改 Hexo/_config.yml 文件，注意 type，repo，branch 冒号后都有一个空格

deploy:
  type: git
  repo: git@github.com:JH0lmes/JH0lmes.github.io.git
  branch: master

将Hexo与github page 联系起来

在hexo文件夹右击，Git Bash Here，然后键入以下代码

1.设置Git的user name和email：(如果是第一次的话)

git config --global user.name "JH0lmes"
git config --global user.email "jh0lmes@foxmail.com"

2.生成密钥，键入以下，然后回车，然后填密码，五位及以上，填两遍，会在
C:\Users\Administrator\.ssh 文件夹中生成几个文件

ssh-keygen -t rsa -C "jh0lmes@foxmail.com"  #其中id_rsa为密钥  id_rsa.pub为公钥

3.到GitHub网页，点击头像Settings，找到SSH and GPG keys，随意填一个Title，Key为
C:\Users\Administrator\.ssh\id_rsa.pub里的内容，复制进去，点击Add SSH key，输入密码

4.查看ssh是否添加成功，输入密码，如果看到Hi后面是你的用户名，就说明成功了

ssh -T git@github.com

5.部署到github，刷新 JH0lmes.github.io 就可以看到自己的博客了

hexo g
hexo d

或直接运行一行代码
hexo d -g

Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中，在执行hexo deploy时将其复制到.deploy文件夹中。Github的版本库通常建议同时附上README.md说明文件，但是hexo默认情况下会把所有md文件解析成html文件，所以即使在线生成了README.md，它也会在你下一次部署时被删去。怎么解决呢？
在执行hexo deploy前把在本地写好的README.md文件复制到.deploy文件夹中，再去执行hexo deploy。

2.完善建好的博客

首先了解下hexo文件夹下各文件的作用

文件夹	说明
.deploy	执行hexo deploy命令部署到GitHub上的内容目录
scaffolds	layout模板文件目录，其中的md文件可以进行编辑
source	文章源码目录，该目录下的md和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件和CNAME等文件都放在这里，该目录下可新建页面目录。
public	源码文件夹，执行hexo generate命令，输出的静态网页内容目录
scripts	扩展脚本目录，这里可以自定义一些javascript脚本
themes	主题文件夹
.gitignore	在push时需要忽略的文件和文件夹
_config.yml	全局配置文件，大多数的设置都在这里
themes\landscape\_config.yml	主题配置文件
source\_posts\hello-world.md	键入hexo new 'filename'生成.md文件，可对其编辑
package.json	依赖包的名称和版本号，类似于一般软件中的关于按钮
_drafts	草稿文章
_posts	发布文章

选择自己喜欢的主题 hexo主题，如NexT、Ochuunn、Sw-blog、Toki、icalm、yilia。在Hexo 文件夹下使用 Git Shell，输入以下两条命令clone到本地，我选择的是NexT，

cd Hexo
git clone https://github.com/iissnan/hexo-theme-next.git themes/next

或者直接下载到本地，然后移动到themes文件夹下，打开站点配置文件，找到 theme 字段，并将其值更改为 next。最后执行上面发博文的命令，刷新个人博客，查看主题是否启用。

接下来就开始大兴土木了！

站点配置文件：

# Site #站点信息
title: blog Name #标题
subtitle: Subtitle #副标题
description: my blog desc #描述
author: me #作者
language: zh-CN #语言
timezone: Asia/Shanghai #时区

# URL
url: http://yoururl.com   #用于绑定域名, 其他的不需要配置
root: /
#permalink: :year/:month/:day/:title/
permalink: posts/title.html
permalink_defaults:

# Directory #目录
source_dir: source #源文件
public_dir: public #生成的网页文件
tag_dir: tags #标签
archive_dir: archives #归档
category_dir: categories #分类
code_dir: downloads/code
i18n_dir: :lang #国际化
skip_render:

# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认模板(post page photo draft)
titlecase: false #标题转换成大写
external_link: true #新标签页里打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
  enable: true
  line_number: true #显示行号
  auto_detect: true
  tab_replace:

# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format #日期时间格式
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination #分页
per_page: 10 #每页文章数, 设置成 0 禁用分页
pagination_dir: page

# Extensions #插件和主题
## 插件: http://hexo.io/plugins/
## 主题: http://hexo.io/themes/
theme: next

# Deployment #部署, 同时发布在 GitHub 和 GitCafe 上面
deploy:
- type: git
  repo: git@gitcafe.com:username/username.git,gitcafe-pages
- type: git
  repo: git@github.com:username/username.github.io.git,master

# Disqus #Disqus评论系统
disqus_shortname: 

plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap

添加背景图，在 themes/*/source/css/_custom/custom.styl 中添加如下代码：

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

修改Logo字体，在 themes/*/source/css/_custom/custom.styl 中添加如下代码：

@font-face {
    font-family: Zitiming;
    src: url('/fonts/Zitiming.ttf');
}
.site-title {
    font-size: 40px !important;
	font-family: 'Zitiming' !important;
}

其中字体文件在 themes/next/source/fonts 目录下，里面有个 .gitkeep 的隐藏文件，打开写入你要保留的字体文件，比如我的是就是写入 Zitiming.ttf ，具体字库自己从网上下载即可。

在menu中添加站内搜索，安装插件

npm install hexo-generator-searchdb --save

修改根目录下的_config.yml，在最底部添加如下配置

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主体配置文件 _config.yml，搜索local_search，修改enable为true，完成。

修改内容区域的宽度，编辑主题的 source/css/_variables/custom.styl 文件，新增变量：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

修改网站标题栏背景颜色，打开 themes/*/source/css/_custom/custom.styl ,在里面写下如下代码：

.site-meta {
  background: $blue; //修改为自己喜欢的颜色
}

自定义鼠标样式，打开 themes/*/source/css/_custom/custom.styl ,在里面写下如下代码：

* {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }

文章加密访问，打开 themes/*/layout/_partials/head.swig文件,在之前插入代码：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入密码') !== '{{ page.password }}'){
                alert('密码错误');
                history.back();
            }
        }
    })();
</script>

添加萌宠，使用live2d

npm uninstall hexo-helper-live2d        #卸载原来的
npm install --save hexo-helper-live2d   #安装新的

安装完成之后在 package.json 会看到安装的model。node_moduels目录下，是动画主配置。下载各种动画，然后将下载好的packages里的所有动画模板拷贝到 node_modules 目录里。配置博客站点配置文件_config.yml

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-epsilon2_1  #模板目录，在node_modules里
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #是否在手机进行显示

将use：xxx改成自己想要展示的，然后更改大小和位置。完成。

写文章时加上password: *：

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---

实现点击出现桃心效果
1.在/themes/*/source/js/src下新建文件click.js，接着把以下粘贴到click.js文件中。代码如下：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

2.在\themes\*\layout\_layout.swig文件末尾添加：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

博文置顶

1.安装插件

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top即可：

---
title: 2018
date: 2018-10-25 16:10:03
top: 10
---

2.设置置顶标志

打开：/themes/*/layout/_macro/post.swig，定位到<div class="post-meta">标签下，插入如下代码：

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

右上角或者左上角实现fork me on github

1.选择样式GitHub Ribbons；
2.修改图片跳转链接,将<a href="https://github.com/you" target="_blank">中的链接换为自己Github链接；
3.打开 themes/next/layout/_layout.swig 文件，把代码复制到<div class="headband"></div>下面。

主页文章添加边框阴影效果，打开 themes/*/source/css/_custom/custom.styl ,向里面加代码:

.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

显示当前浏览进度，修改themes/*/_config.yml，把 false 改为 true：

# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true

创建分类页，在终端窗口下，定位到 hexo 站点目录下，新建：

$ cd <站点目录>
$ hexo new page categories

评论系统

	推荐指数	优点	缺点
Valine	4	每天30000条评论，10GB的储存	作者评论无标识
来必力/livere	4	多种账号登录	评论无法导出

Valine

1.获取APP ID 和 APP Key

请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用，

进入刚刚创建的应用，选择左下角的设置->应用key，然后就能看到你的APP ID和APP Key了。

2.填写APP ID 和 APP Key到主题配置文件_config.yml;

3.运行hexo d -g，推送到博客。

来必力/livere

1.登陆来必力获取你的 LiveRe UID；

2.填写LiveRe UID到主题配置文件_config.yml。

3.编辑博文

创建文章

hexo new [layout] <title>

[layout] 可以为以下三种：

参数名	功能	文章路径
post	新建博文	source/_posts
page	新建页面（如404，分类）	source
draft	草稿	source/_drafts

草稿可通过一下命令发布：

hexo publish [layout] <title>

title注意：

不是博文标题，是博文markdown文件的名字，也是博文链接的后缀（如https://www.simon96.online/2018/10/12/hexo-tutorial/中的hexo-tutorial）

博客 hexo new 'xxx'
页面 hexo new page 'xxx'

写博文：要用到MarkDown编辑器，我使用的是Typora，此编辑器各种操作系统都有。

发布博文：Hexo 文件夹中Git Shell，执行下面几条命令，将博客部署到 GitHub 上：

hexo clean
hexo generate
hexo server   //若要本地预览，否则可省略
hexo deploy

4.新建页面

上面新建的博文是显示在单个文章界面，这里新建的页面是作为单个页面显示的，比如下图的分类、标签、归档和关于我，点击后都是显示为单个页面。

使用如下命令新建页面：

hexo new page "页面名称"

命令执行完后，就会发现在在 Hexo\source 目录中多了一个文件夹，里面还有一个 index.md，这就代表我们新建了一个页面。

5.Front-matter

就是博文最上方以 --- 分隔的那部分。

默认可以使用的Front-matter：

/* ！！！！！！！！！！
** 每一项的 : 后面均有一个空格
** 且 : 为英文符号
** ！！！！！！！！！！
*/

title:
/* 文章标题，可以为中文 */

date:
/* 建立日期，如果自己手动添加，请按固定格式
** 就算不写，页面每篇文章顶部的发表于……也能显示
** 只要在主题配置文件中，配置了 created_at 就行
** 那为什么还要自己加上？
** 自定义文章发布的时间
*/

updated:
/* 更新日期，其它与上面的建立日期类似
** 不过在页面每篇文章顶部，是更新于……
** 在主题配置文件中，是 updated_at
*/

permalink:
/* 若站点配置文件下的 permalink 配置了 title
** 则可以替换文章 URL 里面的 title（文章标题）
*/

categories:
/* 分类，支持多级，比如：
- technology
- computer
- computer-aided-art
则为technology/computer/computer-aided-art
（不适用于 layout: page）
*/

tags:
/* 标签
** 多个可以这样写[标签1,标签2,标签3]
** （不适用于 layout: page）
*/

description:
/* 文章的描述，在每篇文章标题下方显示
** 并且作为网页的 description 元数据
** 如果不写，则自动取 <!-- more -->
** 之前的文字作为网页的 description 元数据
** 建议每篇文章都务必加上！
*/

keywords:
/* 关键字，并且作为网页的 keywords 元数据
** 如果不写，则自动取 tags 里的项
** 作为网页的 keywords 元数据
*/

comments:
/* 是否开启评论
** 默认值是 true
** 要关闭写 false
*/

layout:
/* 页面布局，默认值是 post，默认值可以在
** 站点配置文件中修改 default_layout
** 另：404 页面可能用到，将其值改为 false
*/

type:
/* categories，目录页面
** tags，标签页面
** picture，用来生成 group-pictures
** quote？
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

photos:
/* Gallery support，用来支持画廊 / 相册，用法如下：
- photo_url_1
- photo_url_2
- photo_url_3
https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

link:
/* 文章的外部链接
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

image:
/* 自定义的文章摘要图片，只在页面展示，文章内消失
** 此项只有参考本文 5.14 节配置好，否则请勿添加！
*/

sticky:
/* 文章置顶
** 此项只有参考本文 5.15 节配置好，否则请勿添加！
*/

password:
/* 文章密码，此项只有参考教程：
** http://shenzekun.cn/hexo的next主题个性化配置教程.html
** 第 24 节，配置好，否则请勿添加！
** 发现还是有 bug 的，就是右键在新标签中打开
** 然后无论是否输入密码，都能看到内容
*/

文章格式，~/source/_post/xxx.md

---
title: {{ title }}
date: {{ date }}
permalink:
categories:
tags: []
description:
image:
---
<p class="description"></p>

<img src="https://" alt="" style="width:100%" />

<!-- more -->

##

##

##

<hr />

参考博客：

Hexo

http://shenzekun.cn/hexo%E7%9A%84next%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B.html#more

https://blog.csdn.net/o_mario_o/article/details/80347863

https://www.jb51.net/article/125152.htm

https://www.colabug.com/3319437.html

http://www.cduyzh.com/hexo-settings-3/

https://segmentfault.com/p/1210000011450995/read

https://blog.csdn.net/qq_33858250/article/details/78974588

https://me.idealli.com/post/e8d13fc.html

https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html

Jekyll
https://blog.csdn.net/walkerhau/article/details/77394659?utm_source=debugrun&utm_medium=referral
https://www.jianshu.com/p/ba81a536d61a
https://www.cnblogs.com/luyuan/p/6731877.html

vue
https://www.imooc.com/article/22538?block_id=tuijian_wz