个人博客管理系统_教程 | 一文搭建你的第一个免费专属博客
点击蓝字关注我
本文将详细介绍利用Github+hexo搭建一个免费、简洁的个人博客,从获取域名到菜单栏、搜索框、评论分享这些必要功能的配置,给自己一个个性化的内容分享平台。
—▼—
我建了一个QQ学习交流群,旨在“分享、讨论、学习、资源分享、就业机会、互联网内推、共同进步!”,感兴趣的可以加一下,也可以添加我的QQ~
QQ群:1002821945;QQ号:498073774;
前言
和大多数搭建个人博客的博主一样,我之所以搭建个人博客的主要原因也是因为不希望受制于各大内容分享平台,生怕有朝一日被安上一个“莫须有”的罪名,所有辛苦创作的内容都付之一炬。
关于搭建个人博客,我在内心规划了很久,一直在徘徊于两个选项之间,
自己从底层搭建、注册域名、备案全流程做起;
使用一些免费的托管平台和成熟的博客管理系统;
最终,我还是选择了后者,主要原因有如下几点:
容易搭建
操作和管理简单
免费
界面美观
目前有很多优秀的博客管理系统,例如WordPress、Halo、hexo,经过反复的对比,我选择了Github Page+hexo的方式进行搭建个人主页,虽然看上去只涉及两个工具或平台,但是要搭建一个完整的个人博客,要做的远不止这些,还要考虑有如下内容,
菜单栏
搜索框
评论功能
分享功能
访问量
RSS
链接
......
本文就详细的介绍一下通过Github Page结合hexo搭建一个完整的个人博客。
域名-GithubPage
要想让别人能够访问到我们的个人博客,首先就需要有一个域名,我们可以自己申请、备案域名然后购买并部署到对应服务器,但是对于入门级这显然是繁琐且需要耗费一定资金的,因此可以使用github pages来托管我们的静态网页,这样我们就可以获取一个名为*.github.io的域名。
注册Github Page的过程如下:
第一步:注册Github账号
首先打开链接https://github.com/join?source=header-home,注册github账号,然后登录github。
第二步:创建github仓库
点击右上角"+",选择New repository,填写Repository name,这个就是可以直接访问的域名,然后点击create repository即可。
到此为止,我们就把创建好了github page。
博客管理工具-hexo
hexo是一个轻量级的博客管理系统,这里要注意,hexo是一个管理系统,它负责新建、部署等博客管理工作。如果使用过git做版本控制的话应该很容易理解,它可以类比为git,可以通过一些命令生成静态网页、把静态网页推送到远程仓库。
hexo安装
由于hexo是基于node.js制作的一款博客管理工具,所以要按照hexo就需要事先安装node,http://nodejs.cn/download/
$ npm install -g hexo-cli
hexo初始化
安装hexo之后需要对hexo进行初始化,首先需要新建文件夹,进入到新建文件夹之后再进行初始化,
$ mkdir hexo$ cd hexo$ hexo init
然后安装一些依赖包,
$ npm install
最后可以得到如下目录,
文章
关于
分类
标签
themes中包含的是博客的主题相关内容,其中默认的主题是landscape。
hexo使用
前面提到过,hexo其实类似于git,通过一些命令来实现静态网页生成、部署等工作,我们在维护博客过程中主要使用的有如下几个命令,
$ hexo n blogname # 新建文章,例如,hexo n ComputerScience$ hexo clean # 清除缓存文件$ hexo g # 生成静态文件$ hexo s # 启动本地服务器,预览网页$ hexo d # 部署文件到指定的仓库
记住上述命令就可以进行日常的个人博客维护工作。
主题-Next
经过前面的配置,就可以通过hexo s
启动本地服务器http://localhost:4000/
,在浏览器中打开,对网站进行预览,
hexo默认的主题是landscape,我们可以修改为我们自己喜欢的主题,目前hexo有很多适配的主题,其中比较常用,也是本文推荐的就是Next主题。
一个hexo主题的好坏不仅仅取决于它的界面,还要考虑到后期扩展必备功能的需要,Next主题相对比较成熟,能够轻松的配置谷歌、百度检索,此外还可以很容易添加标题栏、阅读量等功能,下面就来看一下Next主题的配置。
克隆Next主题
首先需要把Next主题克隆到博客中themes路径下,
$ cd hexo$ git clone https://github.com/theme-next/hexo-theme-next themes/next
这样在~/hexo/themes
路径下就会有一个next文件夹。
修改配置文件
克隆next主题之后需要修改博客根目录下_config.yml文件,找到theme
字段修改成next即可,
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next
修改主题样式
next主题包含多个样式,我们可以根据自己的喜好进行修改,修改样式的文件在~/hexo/themes
路径下,名字同为_config.yml,需要注意,这和前面提到的不是同一个文件,前面的配置文件是博客管理系统hexo的配置文件,这里的是主题的配置文件。
# Schemes# scheme: Musescheme: Mist# scheme: Pisces# scheme: Gemini
必备功能
通过前面的配置,我们已经完成个人主页“骨架”部分的搭建,打开预览页面如下,
可以看出,目前为止博客还比较“干净”,很多必要的功能都没有,例如菜单栏不完整,没有搜索框,此外,评论、阅读量、友情链接这些重要的功能都没有,下面就来一一介绍一下这些功能的配置过程。
注意:通过上述配置之后,博客所在路径和主题所在路径下分别有一个
_config.yml
文件,后面所提到的站点配置文件指的是博客根目录下的_config.yml
,主题配置文件是指themes/_config.yml
。
菜单栏
打开主题目录下的配置文件themes/_config.yml
,找到menu
字段修改菜单栏,
menu: home: / || home #about: /about/ || user #tags: /tags/ || tags #categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat
其中about是关于
,tags是标签
,其他的站点之类的也可以根据自己的喜欢进行添加。
搜索框
搜索框是一个博客必不可少的部分,当更新的文章数量逐渐增加之后,为了方便访问者阅读或快速定位目标文章,我们需要给它添加上一个搜索功能,hexo添加搜索框的方式如下,
首先,安装hexo-generator-search
,
$ npm install hexo-generator-search --save
然后,在站点配置文件添加下面内容,
search: path: ./public/search.xml field: post format: html limit: 10000
最后,在把主题配置文件local_search下的enable修改为true,
local_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 -1 top_n_per_article: 1 # Unescape html strings to the readable one. unescape: false # Preload the search data when the page loads. preload: false
修改后重新生成静态网页,预览一下即可,
到目前为止,应该可以看到,博客的名称为hexo且没有作者和网站描述信息、此外,网页显示的语言都是英文,我们可以通过修改站点配置文件来把它转换成英文,同时修改博客标题、描述、作者信息,
title: 平凡而诗意subtitle: Jackpopdescription: 原创技术分享网站keywords:author: Jackpoplanguage: zh-Hans
访问量、阅读量
访问量和文章阅读量是我们了解文章受欢迎程度最直接的方式,因此,访问量、阅读量也是一个完整博客不可或缺的部分,如果使用的是其他主体,需要通过一些脚本配置方式来为博客添加阅读量访问量,但是,如果使用Next主题,则不需要这些繁琐的步骤,这也应了前面所说的那句话--评价一个主题不仅仅要依赖它的美观程度,还要依赖它完善而强大的功能。Next主题自带不蒜子计数功能,我们只需要修改主题配置文件,把busuanzi_count下的enable由false改为true即可,
busuanzi_count: enable: true
评论功能
评论是一个博客非常重要的一项功能,目前有很多知名的博客评论插件,例如比较知名的畅言、来必力、valine等,在这里我还是推荐valine,因为它界面比较简洁,而且不需要访问者注册、登录即可评论,这样对于访问者更加友好。
由于评论内容需要耗费存储资源,因此需要首先注册LeanCloud获取存储引擎,然后复制appid
、appkey
,然后打开主题配置文件,
valine: enable: true appid: Ikslsdjflsjdnclskdfjlskdklalla # your leancloud application appid appkey: Kokkall09kkssmmcsslla # your leancloud application appkey notify: false # mail notifier , https://github.com/xCss/Valine/wiki verify: false # Verification code placeholder: 请在此输入您的留言 # comment box placeholder avatar: mm # gravatar style guest_info: nick,mail,link # custom comment header pageSize: 10 # pagination size
配制后,重新生成,预览一下可以看到如下效果,
分享功能
当我们看到不错的文章想分享给其他同学怎么办?这时候就需要有博客有一个分享功能,强大的Next主题已经集成了百度分享功能,但是百度分享不支持https,如果想正常使用还需要更多的配置。
首先,修改主题配置文件,
# Baidu Share# Available value:# button | slide# Warning: Baidu Share does not support https.baidushare: type: button baidushare: true
把baidushare改为true。
然后,为了解决百度分享不支持https的问题,需要进一步的修改,要先访问下方链接,
https://github.com/hrwhisper/baiduShare
把static文件夹下载到themes\next\source
目录下,
最后,修改themes\next\layout\_partials\share\baidushare.swig
文件,把末位的代码修改一下,
修改前:
.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
修改后:
.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
RSS
RSS(Really Simple Syndication)是一种简易的信息聚合方式,是一种常用的信息订阅方式,但是对于我个人而言这项功能很少使用,如果觉得有必要也可以配置一下,下面就来介绍一下RSS的配置方式。
首先,安装RSS订阅插件,
$ npm install hexo-generator-feed --save
其次,修改站点配置文件,
plugin:- hexo-generator-feed
# Feed Atomfeed:type: atompath: atom.xmllimit: 20
最后,修改主题配置文件,添加下面字段,
rss: /atom.xml
社交、友情链接
在我们的博客中,有时需要添加直达github、知乎、E-mail等社交工具的链接,也需要一些链接到其他网站的友情链接,下面来介绍一下怎么添加社交、友情链接。
首先,打开主题配置文件,搜索social,配置社交链接,
social: GitHub: https://github.com/Jackpopc || github E-Mail: mailto:498073774@qq.com || envelope 知乎: https://www.zhihu.com/people/sharetechlee || book 专栏: https://zhuanlan.zhihu.com/sharetechlee || edit
然后,搜索Blog rolls配置友情链接,
# Blog rollslinks_icon: linklinks_title: Linkslinks_layout: block#links_layout: inlinelinks: Title: http://example.com/
▲
END
有趣的灵魂在等你
长按扫码可关注
相关文章办公效率 | 让你突飞猛进的10个Word技能学习工具 | 推荐10款提升自己的优质APPGoogle | Python编程规范指南实用工具 | 收下这3款工具,再也不用担心英语翻译!我最终还是选择了VS code!文章好看就点这里
个人博客管理系统_教程 | 一文搭建你的第一个免费专属博客相关推荐
- 博客管理系统php教程,Wblog博客程序管理系统
不是每个人都会点到这里看的,说明你想了解WBlog更多-- 在我们了解WBlog是什么之前,先了解一下WBlog的背景. Wblog背景 本人是从事Web开发的,平时用得比较多的是内容管理系统,但由于 ...
- python搭建博客系统_用Pelican快速搭建极简静态博客系统
我一直建议每个开发者都要有写博客记笔记的习惯,一来可以沉淀知识,二来可以帮助别人,我使用过很多博客平台,也用Python开发过博客系统,就这么个东西折腾好几年,一直找不到理想的产品,直到我用Pelic ...
- django开源电子文档管理系统_国产开源文档管理系统——Wizard
介绍 Wizard是一款开源文档管理系统,支持三种格式类型的文档管理,分别是Markdown.Swagger和Table,以便于满足不同场景和不同需求下的文档管理,Markdown类型是当下比较常用的 ...
- html 标题设置链接 博客,从今天开始,拿起VuePress打造属于自己的专属博客
VuePress(0.x版本) 本blog配套了一个基于 VuePress 的一个简单的配置案例,此配置案例包含了本blog绝大部分配置案例,更多详情请移步这里VuePress配置案例 前言 问:这篇 ...
- 传智播客讲师_技术成果:来自两位全职讲师的播客如何帮助您最终获得编程
传智播客讲师 科里(右边是我!)和杰夫(犯罪伙伴)在编码训练营Fullstack Academy录制Tech'd Out. 披露: Fullstack学院 ,编码集训,此前曾赞助黑客中午. 我是Cor ...
- java微信多客服_怎么实现微信多公众号管理?有哪些多客服系统?
互联网信息时代,很多企业的客户咨询渠道众多,微信多个公众号却无法进行统一管理,同一个问题,客服可能需要回答5遍甚至更多,不仅效率极低,客户体验也很不好. 研究表明,服务速度是客户满意度的首要影响因素, ...
- wincc的画面怎么用博图打开_如何把西门子精智面板画面直接转换成博图WINCC RT ADV画面...
JZGKCHINA工控技术分享平台 在工程中我们会遇到客户要求既要用HMI又要用上位机,这样就要写两套程序,工作量相当大.那么有没有什么方法只写HMI程序,然后把HMI程序复制到上位机运行即可呢? 西 ...
- python写订单管理系统_利用Python快速搭建钉钉和邮件数据推送系统
# 加入标题和宽度参数 html_config = html_config.format(title=title, width=width) html_after = '
- DNF60版本阿里云服务器+本地客服端教程①服务端搭建
打开阿里云实例,更换操作系统 点击批量更换系统 在阿里云ECS界面添加安全组规则 用Mobaxterm 连接你的服务器ip,把下面两个文件上传到服务器里 放到根目录下面,之后运行 cd /; chmo ...
最新文章
- python any()和all()
- 30.IntellJ Idea 导入已存在的Maven项目
- 【企业管理】高效会议关注点
- 去中心化交易所如何“惊世骇俗”?
- 欢迎大家推荐使用小技巧
- 车型代号对照表_宝马内部代号对应车型解读,绝密!
- jmail组件 java,分享Jmail发送邮件工具类
- html怎么置顶图像,css怎么固定图片位置不变?
- 如何实现一个基于HTML5的实时视频直播
- python123随机密码生成器_python实例--随机密码生成器
- Go http Server
- 关于“明显没有bug的代码”的一些拙见
- 计算机网络安全复习三——密钥分发与认证协议
- 计算长方形或正方形的周长和面积
- 华为智慧屏 鸿蒙如何,抛开鸿蒙 华为智慧屏V65作为电视合格吗?
- Visual Studio 匹配花括号的背景颜色
- LINUX MMC 子系统分析之五 MMC driver模块分析
- 【工具神器】PO VO DTO 转换神器
- Jquery.city-picker 实现省市区三级联动
- 墨客UTXO和account模型
热门文章
- c语言编程中怎么打汉字,c语言编程中,怎么打汉字啊??我是新手啊~~
- matlab工具包pls,MATLAB PLS_tools PLS部分最小二乘工具箱(主程序)挺好用的数据分析程序 - 下载 - 搜珍网...
- 关于 SAP 电商云 Spartacus UI 访问 b2b site 的权限问题
- Angular 应用里的 vendor.js 是用来干什么的?
- JavaScript 引擎和 Just-in-Time 编译概念,Hot Function 的简单介绍
- SAP Spartacus LayoutConfig的配置为何运行时不生效
- 巧用Angular项目的get设置Angular class属性访问的别名
- Angular ng-container元素的学习笔记
- SAP Spartacus里的converter实例化逻辑
- 一步步创建ABAP post exit增强