使用hexo+github搭建免费的个人博客及主题更换,添加博客特效

写在前面:

目前主流的在线博客平台有很多,如csdn、简书等。此次我们利用github page和hexo搭建免费的博客站,此次我在win平台下演示搭建。

一、环境准备:

1.点击进入下载页:
Node.js
Git
注册github账号

2.下载完成后根据提示安装。
3.安装完成后打开git bash命令行工具。输入node -vgit version可查看node.js和git是否安装成功,出现版本号即成功。

3.然后在你要写博客的目录下创建一个文件夹,名字随意取,如myBlog,然后输入如下命令来安装hexo:

npm install -g hexo-cli

安装完成后,cd切换到刚才新建的文件夹myBlog中,我的在e盘下。使用hexo+github搭建免费的个人博客及主题更换,添加博客特效_第1张图片
命令行输入如下命令安装hexo:

hexo init myBlog
npm install

这时候文件夹中会生成5个目录和文件:其中 _config.yml 是网站设置文件,source文件夹是博客的资源文件, _posts 目录是存放博客的地方。

到此,hexo安装完毕,已经可以输入hexo s启动本机服务器,然后打开浏览器输入http://localhost:4000在本机服务器预览了。

二、开始部署:

1.在github上新建一个 用户名.github.io 的仓库,勾选上Initialize this repository with a README,如下图:使用hexo+github搭建免费的个人博客及主题更换,添加博客特效_第2张图片
2.下面通过SSH key配置本地git和github的连接:

如果之前没有配置过,那么秘钥需要生成。(如果之前使用过git,那么此第2步可跳过,无需再次配置。)秘钥默认路径:~/.ssh/id_rsa.pub

下面生成秘钥:

git config --global user.name "用户名"
git config --global user.email "邮箱"

提示秘钥保存位置可选默认,无需更改,一路回车,最后命令行界面弹出ssh-rsa开头的即是秘钥,从“ssh-rsa”开始复制到结尾保存。

在github上填入秘钥:按图示打开github网站
使用hexo+github搭建免费的个人博客及主题更换,添加博客特效_第3张图片使用hexo+github搭建免费的个人博客及主题更换,添加博客特效_第4张图片
Title随意起,将秘钥粘贴到Key一栏,点击 Add SSH key

下面在git bash命令行界面输入
ssh -T [email protected]
来添加信任列表,提示Hi ! You’ve successfully authenticated, but GitHub does not provide shell access. 即成功!

3.下面使用文本编辑工具打开安装目录下的 _config.yml 配置文件进行修改,我使用Editplus++打开,翻到末尾:如图输入,在repo输入你自己的地址(注意type、repo、branch的冒号后面都有一个空格!!)使用hexo+github搭建免费的个人博客及主题更换,添加博客特效_第5张图片
上面参数描述:
repo:库(Repository)地址
branch:分支名称。如果不指定,则默认值为 master

4.下面安装 hexo-deployer-git
git bash输入:npm install hexo-deployer-git --save
然后输入hexo ghexo d将本地文件推送到github仓库,打开https://用户名.github.io测试,是否已经看到自己博客的雏形了。

:执行hexo g时,git在本地生成网页静态文件,执行hexo d时将public目录下的文件推送到远程仓库。

三、开始写博客:

1.hexo new '文章标题'
执行后在安装文件的/source/_posts目录下可以看到文章标题.md的文件,md是Markdown类型的文档,可以使用markdown文档编辑器书写博客。
2.写完后执行命令:hexo clean hexo g hexo d,执行hexo clean是清空本地缓存,避免出现错误,建议每次上传前都执行一次。此时打开自己的博客网站看看是不是已经可以看到刚才写的博客了。

四、主题替换:

这里我贴出hexo的 官方教学文档网站,可以按照文档中指引进行更换主题。文档中的主题配置文件是指主题目录下的 _config.yml 文件,比如我使用的nexT主题,配置文件在E:\myBlog\themes\next 下。这个配置文件不要和同名的站点配置文件搞混。后续通过修改配置文件中的各项参数即可实现网站及主体的配置,包括名字、头像、语言、菜单、侧边栏等。

五、给出几种主体美化方式:

以我的博客为例,我添加了背景线条动态特效和鼠标点击出现彩色心心特效:

1.背景线条动态特效:

我使用了nexT主体自带的特效,在主体配置文件中搜索:canvas_nest,如下输入(注意冒号后面有空格!!):使用hexo+github搭建免费的个人博客及主题更换,添加博客特效_第6张图片

canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,0' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # the number of lines

下面下载特效的资源包:

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

2.点击出心心特效:

首先在 /themes/next/source/js/src 目录下新建文件:clicklove.js,将下面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

打开 \themes\next\layout_layout.swig 目录,在文件末尾添加:



如图:在这里插入图片描述

保存后,依次进行 hexo clean hexo g hexo d进行上传,打开自己网站查看一下效果。
主体可以折腾的地方还有很多,可以自行搜索教程。若文中有不对的地方烦请指出。

你可能感兴趣的:(其他)