个人博客的搭建:
本次是基于hexo框架来搭建个人博客,可以挂载到Github上,优化会在后期进行。
Step1:
-
首先要在机器上安装node.js,到node.js官网下载安装就行,安装步骤=下一步
检查安装是否成功:
node -v
-
安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成检查:cnpm -v
- 使用cnpm全局安装hexo:
npm install -g hexo-cli
卸载hexo: npm uninstall hexo-cli -g
安装完检查:hexo -v
-
mkdir命令创建一个空文件夹(后序博客内容全部在这里面)
-
使用管理员命令初下载博客:
sudo hexo init
Step2:
进入到blog文件夹下发现Hexo自动帮我们生成了一些文件:
- 本地运行起博客:
hexo s
-
创建发布我的第一篇博客:
首先进入到 blog/source/_posts 目录下,该目录中存放的就是我们创建的博客文件,使用vim编辑器博客,然后创建.md文件。
文件创建完成后退回到blog目录清除缓存
hexo clean
。然后重新生成博客:
hexo g
。最后重新启动博客即可:
hexo s
。
Step3:挂载博客到Github(不错的选择):
-
在GitHub上新建仓库,注意仓库名必须为 xxx.github.io 注意这里的xxx必须为你的Github用户名,否则后面访问时为404!
-
下载部署到Github上的插件:
cnpm install --save hexo-deployer-git
-
修改_config.yml文件:
通过vim编辑器进入到文件的最后新增如下代码:
deploy:
type: git
repo: 你的github上博客仓库的地址
branch: master
- 更换主题:
在 https://hexo.io/themes/ 中挑选自己喜欢的,不推荐花里胡哨的,那种教程比较少。
推荐使用 https://github.com/litten/hexo-theme-yilia 简洁的风格,毕竟主要是用来记录学习的过程。
选择好Github主题后就 git clone到blog文件夹下,你会发现新克隆的主题存放在themes文件夹下。
最后就是 清除缓存然后重新部署到 Github上即可啦!
- 美化
(1).添加网易云音乐插件:
①首先打开网易云音乐首页,复制自己喜欢的音乐外分享外链:
点击后会生成对应的HTML代码。
②引入播放器代码:
在你的yilia主题文件夹theme中的 layout/_partial/left-col.ejs
文件中添加如下代码:
!注意需要放在
<!-- 网易云音乐插件 -->
<% if (theme.music && theme.music.enable){ %>
<div style="position:absolute; bottom:120px left:auto; width:85%">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=<%=theme.music.id||1334445174%>&auto=<%=theme.music.autoplay?1:0%>&height=66"></iframe>
</div>
<% } %>
(2).添加字数统计:
①安装 hexo-wordcount:
在博客根目录下输入: npm i –save hexo-wordcount
②文件配置:
在\yilia\layout\_partial\post
下创建word.ejs文件:
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text"> 字数统计: </span>
<span class="post-count"><%= wordcount(post.content) %>字</span>
</span>
</span>
<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text"> 阅读时长: </span>
<span class="post-count"><%= min2read(post.content) %>分</span>
</span>
</span>
</div>
接着在themes/yilia/layout/_partial/article.ejs
中添加:
<div class="article-inner">
<% if (post.link || post.title){ %>
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
<% if (!post.noDate){ %>
<%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
<!-- 需要添加的位置 -->
<!-- 开始添加字数统计-->
<% if(theme.word_count && !post.no_word_count){%>
<%- partial('post/word') %>
<% } %>
<!-- 添加完成 -->
<% } %>
</header>
③开启统计字数的功能:
在_config.yml中添加:
# 是否开启字数统计
#不需要使用,直接设置值为false,或注释掉
word_count: True
(3).修改文章标题样式:
感谢:
b站up主 codesheep(非常好的教程!):
https://www.bilibili.com/video/BV1Yb411a7ty?from=search&seid=15936694823282570499
yilia风格美化教程:
https://blog.csdn.net/lynnbest/article/details/79845944
感谢:
b站up主 codesheep(非常好的教程!):
https://www.bilibili.com/video/BV1Yb411a7ty?from=search&seid=15936694823282570499
yilia风格美化教程:
https://blog.csdn.net/lynnbest/article/details/79845944
客官进来看看呗:
https://iStitches.github.io