Hexo+Next主题搭建个人博客+优化 写在前面 由于之前建站的主机忘记续费了,我之前的博客数据都丢失了…
上一次我使用了typecho来建立博客,但是由于主机忘记续费的原因导致我的博客丢了。(其实在2018年之前我的旧博客使用的是WordPress来建站的…但是那时候也是因为更换vps没备份站点的原因让博客丢失了)
后来一次偶然的机会,我听说了Hexo。我使用它作为我博客的静态站点生成器,将生成的静态资源部署在Github Page上,它真的对我很有用。
本篇文章不是一个通用教程,仅为本人记录这次博客还原的过程。
安装hexo 由于我已经安装过了,所以直接把之前的blog clone回来。
执行命令:
1 2 3 4 git clone -b hexo https://github.com/ldeus/ldeus.github.io.git cd ldeus.github.io hexo g hexo s
主题安装 启动hexo发现WARN No layout: about/index.html
,然后发现主题文件夹里面的主题空了,重新clone一下next仓库。
执行命令:
1 git clone https://github.com/iissnan/hexo-theme-next themes/next
这回可以正常显示blog了,但是主题样式的配置直接就全部丢失了,那么就只能重新配置了。
后来发现,是因为仓库嵌套的原因导致的主题丢失,选了个简单的方法解决。
执行命令:
主题设定 选择 Scheme 修改 主题配置文件 `themes/next/_config.yml`。
1 2 3 4 5 6 # Scheme Settings # Schemes #scheme: Muse #scheme: Mist #scheme: Pisces `scheme: Gemini`
设置头像 编辑 主题配置文件 `themes/next/_config.yml`,修改字段 `avatar`, 值设置成头像的链接地址。
1 2 3 4 5 6 7 8 9 # Sidebar Avatar avatar: # Replace the default image and set the url here. url: https://dn-qiniu-avatar.qbox.me/avatar/c4556090fb12d7606759d269fa90cb8f?s=320 # If true, the avatar will be dispalyed in circle. rounded: true # If true, the avatar will be rotated with the cursor. rotated: true
设置友链 hexo自带友链功能:编辑 主题配置文件 `themes/next/_config.yml`,修改字段 `links`,如下所示。
1 2 3 4 5 6 7 8 # Blog rolls links_settings: icon: fa fa-link title: Links # Available values: block | inline layout: block links: iseki blog: https://blog.iseki.space/
新增友链页面 链接多了以后,排版不是很美观,还是需要给友链新增一个单独的页面比较推荐:
执行命令:
编辑 主题配置文件 `themes/next/_config.yml`,修改字段 `links`,如下所示。
`/themes/next/languages/zh-CN.yml`文件中`menu`下增加中文描述:
###### 新增links.swig页 在`/themes/next/layout/`新建`links.swig`,内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 {% block content %} {######################} {### LINKS BLOCK ###} {######################} <div id="links"> <style> #links{ margin-top: 5rem; } .links-content{ margin-top:1rem; } .link-navigation::after { content: " "; display: block; clear: both; } .card { width: 300px; font-size: 1rem; padding: 10px 20px; border-radius: 4px; transition-duration: 0.15s; margin-bottom: 1rem; display:flex; } .card:nth-child(odd) { float: left; } .card:nth-child(even) { float: right; } .card:hover { transform: scale(1.1); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } .card a { border:none; } .card .ava { width: 3rem!important; height: 3rem!important; margin:0!important; margin-right: 1em!important; border-radius:4px; } .card .card-header { font-style: italic; overflow: hidden; width: 236px; } .card .card-header a { font-style: normal; color: #2bbc8a; font-weight: bold; text-decoration: none; } .card .card-header a:hover { color: #d480aa; text-decoration: none; } .card .card-header .info { font-style:normal; color:#a3a3a3; font-size:14px; min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style> <div class="links-content"> <div class="link-navigation"> {% for link in theme.mylinks %} <div class="card"> <img class="ava" src="{{ link.avatar }}"/> <div class="card-header"> <div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div> <div class="info">{{ link.info }}</div> </div> </div> {% endfor %} </div> {{ page.content }} </div> </div> {##########################} {### END LINKS BLOCK ###} {##########################} {% endblock %}
###### 修改page.swig
在`{ % block title % }`到`{ %- else % }NaN`之间添加以下内容:
1 2 {% elif page.type === 'links' and not page.title %} {{ __('title.links') + page_title_suffix }}
在`{ % block content % }`到`{ % else % }`之间添加以下内容:
1 2 {% elif page.type === 'links' %} {% include 'links.swig' %}
配置友链 编辑 主题配置文件 `themes/next/_config.yml`,在末尾处新增如下内容:
1 2 3 4 5 6 7 8 9 10 11 # 友情链接 mylinks: - nickname: ldeus avatar: https://dn-qiniu-avatar.qbox.me/avatar/c4556090fb12d7606759d269fa90cb8f?s=320 site: https://www.ldeus.com info: 保持热爱,奔赴山海 - nickname: iseki blog avatar: https://avatars.githubusercontent.com/u/13687964?v=4 site: https://blog.iseki.space info: 没什么,只是个备忘录
SEO优化 sitemap 安装插件sitemap
、baidu-sitemap
。
执行命令:
1 2 npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save
将sitemap文件添加到站点配置文件 `_config.yml`中,并修改`url`字段的值,其值默认为http://yoursite.com。
1 2 3 4 5 6 sitemap: path: sitemap.xml baidusitemap: path: baidusitemap.xml url: https://www.ldeus.com
安装完成后执行hexo g
即会在站点public
目录下生成sitemap.xml
和baidusitemap.xml
。
添加蜘蛛协议 在站点source
文件夹下新建robots.txt
文件,文件内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 User-agent: * Allow: / Allow: /archives/ Allow: /categories/ Allow: /tags/ Allow: /resources/ Disallow: /vendors/ Disallow: /js/ Disallow: /css/ Disallow: /fonts/ Disallow: /vendors/ Disallow: /fancybox/ Sitemap: https://www.ldeus.com/sitemap.xml Sitemap: https://www.ldeus.com/baidusitemap.xml
编辑站点配置文件 `_config.yml`修改`skip_render`字段,添加`robots.txt`。
1 skip_render: ['README.md' , 'robots.txt']
在线编辑 整个web在线编辑页,方便写文章。 执行命令:
1 npm install hexo-admin --save
在hexo
启动之后就可以在http://ip:4000/admin
在线编辑了。
在hexo目录下执行命令:
1 2 3 4 5 6 7 8 cat > hexo-deploy.sh <<EOF # !/usr/bin/env sh hexo clean && hexo g && hexo d EOF cat >> _config.yml << EOF admin: deployCommand: './hexo-deploy.sh' EOF
最后就可以在线deploy了。