合肥网站优化平台,六安seo公司选择8火星,免费生成logo的软件,房屋网站准备工作
博客基于 Hexo 搭建#xff0c;使用主题为 Next#xff0c; 为保证过程顺利#xff0c;需要先做一些准备#xff0c;包括需要使用的依赖及账号#xff0c;搭建环境为 Windows。
依赖
Node.js
Node.js 是一个开源、跨平台的 JavaScript 运行时环境#xff0c…准备工作
博客基于 Hexo 搭建使用主题为 Next 为保证过程顺利需要先做一些准备包括需要使用的依赖及账号搭建环境为 Windows。
依赖
Node.js
Node.js 是一个开源、跨平台的 JavaScript 运行时环境基于 Google 的 V8 引擎我们在接下来的操作中处处离不开 Node 与 NPM(Node Package Manager)安装请看Node.js官方网站NPM 会与 Node.js 一起安装安装后在 cmd 窗口键入以下命令验证
node -vnpm -v出现版本号则说明安装成功。
Git
Git 是一种分布式开源版本控制系统(VCS)可以理解为仓库管理项目代码可以管理本地仓库与远程仓库我们主要用来推送博客至 Github 远程仓库更新个人博客网站。Git 官网关于 Git 的安装较为复杂推荐一篇详细讲解的文章Git 详细安装教程。
相关账号注册
Github
说到Github相信大家都不会陌生它是全球最大的同性交友网站提供了一系列的免费服务。前往 Github 官网 注册账号。
阿里云
主要用于自定义域名若无需求可无视阿里云官网直接使用支付宝账号注册登录即可。
LeanCloud
用于存放评论数据若无需求可无视LeanCloud 官网也可以暂时放置后面介绍评论系统时一并注册。
博客搭建
本地搭建
Hexo 是基于 Node 的博客框架能够帮助我们快速生成静态站点使用需要先安装输入以下命令
npm install hexo-cli -g # g 表示 global, 全局安装如果长时间下载不下来可以切换 npm 源为淘宝镜像
npm config set registry https://registry.npmmirror.comnpm config get registry # 验证是否成功安装后就可以通过 hexo init 博客存放目录 命令初始化博客雏形
hexo init blogcd ./blog # 进入目录初始化的文件目录大概如下
|-- blog|-- .gitignore # git 忽略文件|-- package-lock.json|-- package.json # 项目信息与配置|-- _config.landscape.yml # landscape 主题配置|-- _config.yml # 站点配置|-- .github| |-- dependabot.yml|-- scaffolds # 模板目录| |-- draft.md # 草稿模板| |-- page.md # 页面模板| |-- post.md # 文章模板|-- source # 资源目录| |-- _posts # 文章目录| |-- hello-world.md # 初始化自带文章|-- themes # 所有主题存放目录|-- .gitkeep依次键入命令
hexo new title # 创建一篇名为 title 的文章在 _posts 目录下hexo g # g 表示 generate生成静态文件hexo s # s 表示 server开启一个本地服务器默认为 http://localhost:4000访问 http://localhost:4000即可看到网站雏形
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TRiirVKI-1692548038304)(http://qkc148.bvimg.com/18470/0e2a1a239bc219de.png ‘初始化’)]
默认主题为 landscape我们将其更换为 Next先卸载 landscape
npm un hexo-theme-landscape安装 Next
git clone https://github.com/next-theme/hexo-theme-next themes/next注意git 配置了 ssh 要使用以下命令
git clone gitgithub.com:next-theme/hexo-theme-next.git themes/next此时 themes 目录下会多出一个 next 目录然后修改根目录站点配置 _config.yml 文件
# _config.yml#theme: landscape
theme: next可以看到主题已经改变了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NmQ17BnQ-1692548038306)(http://qkc148.bvimg.com/18470/9a468b2b731affad.png ‘next 主题’)]
链接 Github Pages
新建 Github 仓库仓库名应为 Github 用户名.github.io复制仓库链接配置了 ssh 应复制 ssh 链接修改站点配置
# _config.ymldeploy:type: gitrepo: 上一步复制的链接branch: master安装 git 部署插件
npm install hexo-deployer-git --save键入以下命令
hexo clean # 清除缓存hexo ghexo d # d表示deploy部署至 Github然后访问 Github 用户名.github.io 即可
自定义域名
首先你需要有一个域名我用的是阿里云所以演示也是基于阿里云官网操作先登录阿里云找到域名解析点添加设置添加如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g12Lff5t-1692548038308)(http://qkc148.bvimg.com/18470/46026a0a9acbe2ad.png ‘解析DNS’)]
其中第一项记录值需要替换为 Github 用户名.github.io第二项纪录值可以在 cmd 窗口中输入以下命令得知
ping 用户名.github.io第三项记录值是 Github 官方的 IP有被更换的可能可以前往 Github 官方文档 处查看
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wIZ3tnk4-1692548038309)(http://qkc148.bvimg.com/18470/fb8d6ba8afa651bf.png ‘Github 官方文档’)]
设置解析后前往 仓库设置为自己的域名Settings - Pages
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SBMfY0HW-1692548038311)(http://qkc148.bvimg.com/18470/8b4afa23cced642e.png ‘设置域名’)]
在 source 目录下新建 CNAME 文件输入自己的域名不要带 www后保存再次输入以下命令
hexo cleanhexo ghexo d如果每次执行嫌麻烦可以在项目根目录新建 run.bat 文件写入 hexo clean hexo g hexo d保存即可以后需要发布双击此文件就会自动执行命令想要在本地运行可以将 d 换成 s。
Hexo 配置
网站标题、关键字等
站点配置修改根目录 _config.yml。
#_config.yml# Site
title: yuanyxh - 学习与沉淀 # 站点标题
subtitle: 学以致用 # 站点二级标题
description: 读万卷书行万里路 # 站点描述
keywords: 博客, web, 前端, JavaScript, React, Vue, Node, Java, C/C, Frida, Xposed # 站点关键词
author: yuanyxh # 作者
language: zh-CN # 语言
timezone: Asia/Shanghai # 时区以上内容建议认真填写会影响 SEO。
添加黑暗模式
Next 默认支持黑暗模式但无法手动切换使用 drakmode.js 手动添加支持主题配置
# _config.next.ymlvendors:# cdn 引用插件darkmode_js: https://cdn.jsdelivr.net/npm/darkmode-js1.5.7/lib/darkmode-js.min.jsdarkmode_js:enable: true # 启用插件在 /themes/next/layout/_scripts/vendors.njk 中添加内容
# vendors.njk{# Customize darkmode.js - Declaration #}
{%- if theme.darkmode_js.enable %}script src{{ theme.vendors.darkmode_js }}/script
{%- endif %}{# Customize darkmode.js - Invokation #}
{%- if theme.darkmode_js.enable %}
script
var options {bottom: 64px, // default: 32pxright: unset, // default: 32pxleft: 32px, // default: unsettime: 0.5s, // default: 0.3smixColor: transparent, // default: #fffbackgroundColor: transparent, // default: #fffbuttonColorDark: #100f2c, // default: #100f2cbuttonColorLight: #fff, // default: #fffsaveInCookies: true, // default: true,label: , // default: autoMatchOsTheme: true // default: true
}
const darkmode new Darkmode(options);
darkmode.showWidget();
/script
{%- endif %}此时可以手动切换模式但样式部分还需要更改当切换到黑暗模式时drakmode.js 会在 body 元素中添加 darkmode--activated 类我们新建 themes/next/source/css/_custom/drakmode.styl 样式文件写入以下内容
# drakmode.styl.darkmode--activated {--body-bg-color: $body-bg-color-dark;--content-bg-color: $content-bg-color-dark;--card-bg-color: $card-bg-color-dark;--text-color: $text-color-dark;--blockquote-color: $blockquote-color-dark;--link-color: $link-color-dark;--link-hover-color: $link-hover-color-dark;--brand-color: $brand-color-dark;--brand-hover-color: $brand-hover-color-dark;--table-row-odd-bg-color: $table-row-odd-bg-color-dark;--table-row-hover-bg-color: $table-row-hover-bg-color-dark;--menu-item-bg-color: $menu-item-bg-color-dark;--btn-default-bg: $btn-default-bg-dark;--btn-default-color: $btn-default-color-dark;--btn-default-border-color: $btn-default-border-color-dark;--btn-default-hover-bg: $btn-default-hover-bg-dark;--btn-default-hover-color: $btn-default-hover-color-dark;--btn-default-hover-border-color: $btn-default-hover-border-color-dark;--highlight-background: $highlight-background-dark;--highlight-foreground: $highlight-foreground-dark;--highlight-gutter-background: $highlight-gutter-background-dark;--highlight-gutter-foreground: $highlight-gutter-foreground-dark;img {opacity: .75;:hover {opacity: .9;}}code {color: #69dbdc;background: transparent;}
}然后在 themes/next/source/css/main.styl 中添加引用
# main.stylimport _custom/darkmode.styl;替换 Markdown 渲染引擎
Hexo 默认的渲染引擎缺少了很多功能我们对他进行替换先卸载默认渲染引擎
npm un hexo-renderer-marked --save安装 hexo-renderer-markdown-it 插件
npm i hexo-renderer-markdown-it --save站点配置添加内容
# _config.ymlmarkdown:preset: defaultrender:html: truexhtmlOut: falselangPrefix: language-breaks: truelinkify: truetypographer: truequotes: “”‘’enable_rules:disable_rules:plugins:- markdown-it-abbr- markdown-it-cjk-breaks- markdown-it-deflist- markdown-it-emoji- markdown-it-footnote- markdown-it-ins- markdown-it-mark- markdown-it-sub- markdown-it-sup- markdown-it-checkbox- markdown-it-imsize- markdown-it-expandable- name: markdown-it-containeroptions: success- name: markdown-it-containeroptions: tips- name: markdown-it-containeroptions: warning- name: markdown-it-containeroptions: dangeranchors:level: 2collisionSuffix: permalink: falsepermalinkClass: header-anchorpermalinkSide: leftpermalinkSymbol: ¶case: 0separator: -安装以下插件
npm i markdown-it-checkboxnpm i markdown-it-imsizenpm i markdown-it-expandableNext 配置
默认提供的 Next 只提供了部分功能我们可以修改默认配置来进行扩展在项目根目录新建 _config.next.yml 主题配置文件这个文件中的配置优先于 next 主题中的 _config.yml。
替换布局
next 默认使用的布局为 Muse这里我使用的是Mist# 代表注释。将内容复制粘贴至 _config.next.yml。
# _config.next.yml# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini菜单项
可以按需添加修改不需要显示的菜单项注释即可。
#_config.next.ymlmenu:home: / || fa fa-home # 首页tags: /tags/ || fa fa-tags # 标签categories: /categories/ || fa fa-th # 分类archives: /archives/ || fa fa-archive # 归档schedule: /schedule/ || fa fa-calendar # 日程表sitemap: /sitemap.xml || fa fa-sitemap # 站点地图about: /about/ || fa fa-user # 关于commonweal: /404/ || fa fa-heartbeat # 404# Enable / Disable menu icons / item badges.
menu_settings:icons: true # 是否显示图标badges: false # 是否显示右上角文章数量此时我们点击菜单项会发现除首页和归档外其他菜单项都会丢失页面因为我们还没创建对应的页面使用 hexo new page 页面名
hexo new page tags # 创建标签页hexo new page categories # 创建分类页hexo new page about # 创建关于页此时 source 会多出几个文件夹与之对应。
既然有标签和分类那我们要怎么将文章标记和归类呢以分类为例我们找到 source/categories/ 下的 index.md修改内容为
# source/categories/index.md---
type: categories
title: 文章分类
date: 2022-10-19 13:30:10
---可以看到就是加了一个 type 字段指明这个 Markdown 文件用来分类这样我们的文章想要分类时可以这样
# source/_posts/个人博客搭建 - 基于Hexo Next Github.md---
title: 个人博客搭建 - 基于Hexo Next Github
categories:- 站点建设 # 指明分类
date: 2022-10-21 09:21:00
description: 基于 Hexo 框架搭配 Next 主题搭建自己的第一个博客并配合 Github Pages 免费服务让别人也能访问你的博客 # 添加文章描述
---添加本地搜索
安装搜索插件
npm install hexo-generator-search在站点配置文件中添加内容
# _config.ymlsearch:path: search.xml # 查找路径search.xml 是插件默认生成的检索文件field: post # 查找类型content: true # 是否开启查找文章内容template: ./search.xml开启主题的本地搜索添加内容
# _config.next.ymllocal_search:enable: true# If auto, trigger search by changing input.# If manual, trigger search by pressing enter key or search button.trigger: auto# Show top n results per article, show all results by setting to -1top_n_per_article: 1# Unescape html strings to the readable one.unescape: false# Preload the search data when the page loads.preload: false修改网站图标
以下配置不用添加在 theme/next/source/images 目录下将你想要使用的图标复制进去并重命名为 favicon-16x16-next.png 和 favicon-32x32-next.png
favicon:small: /images/favicon-16x16-next.pngmedium: /images/favicon-32x32-next.pngapple_touch_icon: /images/apple-touch-icon-next.pngsafari_pinned_tab: /images/logo.svg#android_manifest: /manifest.json添加版权
# _config.next.ymlcreative_commons:license: by-nc-sa # 使用的协议# Available values: big | smallsize: small # 大小sidebar: false # 侧边栏是否显示post: true # 文章是否显示language: zh-CN # 语言配置后如下所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WLhV9vKI-1692548038313)(http://qkc148.bvimg.com/18470/e82c64e56b76f575.png ‘设置域名’)]
配置侧边栏
# _config.next.ymlsidebar:position: right # 侧边栏位置display: hide # 侧边栏默认隐藏padding: 18offset: 12avatar:url: /images/Only_Me_Edit.png # 头像路径rounded: true # 是否显示圆形头像rotated: false # 鼠标移入是否旋转site_state: true # 是否显示日志、分类等# 设置社交链接可添加删除
social:GitHub: https://github.com/yuanyxh || fab fa-githubQQ: http://wpa.qq.com/msgrd?v3uin725441272siteqqmenuyes || fa-brands fa-qq掘金: https://juejin.cn/user/2881148117060749 || fa-solid fa-layer-group#E-Mail: mailto:yournamegmail.com || fa fa-envelope#Weibo: https://weibo.com/yourname || fab fa-weibo#Google: https://plus.google.com/yourname || fab fa-google#Twitter: https://twitter.com/yourname || fab fa-twitter#FB Page: https://www.facebook.com/yourname || fab fa-facebook#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow#YouTube: https://youtube.com/yourname || fab fa-youtube#Instagram: https://instagram.com/yourname || fab fa-instagram#Skype: skype:yourname?call|chat || fab fa-skypesocial_icons:enable: true # 是否启用社交链接对应图标icons_only: false # 是否只显示图标transition: false显示文章字数与阅读时长
安装 hexo-symbols-count-time 插件
npm install hexo-symbols-count-time站点配置
# _config.ymlsymbols_count_time:symbols: true # 启用字数统计time: true # 启用阅读时长估计total_symbols: true # 字符总数total_time: true # 总时长exclude_codeblock: false # 是否包含代码块awl: 4wpm: 275suffix: mins.主题配置
# _config.next.ymlsymbols_count_time:separated_meta: trueitem_text_total: false文章添加时效性提示
根目录新建 /scripts/injector.js 文件写入以下内容
//注入文章过期提示
hexo.extend.injector.register(body_end, script src/js/outdate.js/script,post)新建 /source/js/outdate.js 文件写入内容
(function() {//不同的日期显示不同的样式200 天为黄色提示400天为红色提示可以自己定义。let warningDay 200;let errorDay 400;// 确保能够获取到文章时间以及在文章详情页let times document.getElementsByTagName(time);if (times.length 0) { return; }let posts document.getElementsByClassName(post-body);if (posts.length 0) { return; }// 获取系统当前的时间let pubTime new Date(times[0].dateTime); /* 文章发布时间戳 */let now Date.now() /* 当前时间戳 */let interval parseInt(now - pubTime)let days parseInt(interval / 86400000)/* 发布时间超过指定时间毫秒 *///note warning 以及 note danger 是 Next 主题的自定义模板语法如果使用其他主题请自行更改样式以达到最佳显示效果if (interval warningDay*3600*24*1000 interval errorDay*3600*24*1000){posts[0].innerHTML div classnote warning h5文章时效性提示/h5p这是一篇发布于 days 天前的文章部分信息可能已发生改变请注意甄别。/p /div posts[0].innerHTML;}else if(interval errorDay*3600*24*1000){posts[0].innerHTML div classnote danger h5文章时效性提示/h5p这是一篇发布于 days 天前的文章部分信息可能已发生改变请注意甄别。/p /div posts[0].innerHTML;}})();文章超过200天则显示过时提示
代码块添加复制功能
主题配置添加
# _config.next.ymlcodeblock:copy_button:enable: true# Available values: default | flat | macstyle: mac添加评论系统
Hexo博客进阶为 Next 主题添加 Waline 评论系统 Waline 官方文档
::: warning
注意 根据 LeanCloud 官方描述目前国际版已不支持国内访问具体看 LeanCloud 国际版共享域名不再向中国大陆提供服务 :::
这意味着国内网络无法获取并发布评论数据本站后续可能会替换评论系统如需要其他评论系统可看 Next 文档 - 评论系统
网站 SEO 优化
SEO即搜索引擎优化这里的 SEO 优化主要针对项目的体积加速站点首屏加载时间实际还要看站点内容是否优质有效用户访问量等。
压缩代码
安装插件
npm install hexo-neat --save站点配置添加
# _config.yml# 开启压缩
neat_enable: true
neat_html:enable: trueexclude:
neat_css:enable: trueexclude:- **/*.min.css
neat_js:enable: truemangle: trueoutput:compress:exclude:- **/*.min.js- **/index.js站点收录
如何让搜索引擎收录我的站点 Next SEO
网站性能测试
一个好的网站性能是必须要好的如果用户访问你的网站要等很久或者网站页面卡顿就会降低用户的满意度从而流失大量用户这里推荐一个性能测试网站专门用于测试网站性能并生成统计报告
PageSpeed Insights
参考文章 GitHubHexo 搭建个人网站详细教程 hexo博客站点sitemap的使用 Hexo Next 主题进阶设置 Hexo Next 8.x 主题添加可切换的暗黑模式 Hexo搭建的GitHub博客之优化大全 Hexo选择更高级的Markdown渲染器 Hexo-NexT 加载性能优化 Hexo博客进阶为 Next 主题的 Hexo 博客内容添加文章过期/时效提示 Hexo Next Pages 个人博客 - SEO优化 Hexo博客进阶为 Next 主题添加 Waline 评论系统 9%98%B6%EF%BC%9A%E4%B8%BA-Next-%E4%B8%BB%E9%A2%98%E7%9A%84-Hexo-%E5%8D%9A%E5%AE%A2%E5%86%85%E5%AE%B9%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E8%BF%87%E6%9C%9F-%E6%97%B6%E6%95%88%E6%8F%90%E7%A4%BA/ 9: https://www.linjiexin.com/post/blog-seo/ 10: https://theme-next.js.org/docs/theme-settings/seo.html 11: https://qianfanguojin.top/2022/01/20/Hexo%E5%8D%9A%E5%AE%A2%E8%BF%9B%E9%98%B6%EF%BC%9A%E4%B8%BA-Next-%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0-Waline-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/ PageSpeed Insights: https://pagespeed.web.dev/?utm_sourcepsiutm_mediumredirect Waline: https://waline.js.org/guide/get-started.html LeanCloud CN: https://forum.leancloud.cn/t/2022-8/25408 Next Comments: https://theme-next.js.org/docs/third-party-services/comments
