| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> 开发工具 -> 如何搭建个人博客 -> 正文阅读 |
|
[开发工具]如何搭建个人博客 |
目录本人最近心血来潮,想要搭建一个属于自己的个人博客。参考的是Fangzh的hexo史上最全搭建教程这篇博客,加上自己的一些补充。 搭建博客的方式大体上说有三种:
这里我采用的git-Node.js-Hexo的方式构建的博客。 这种方式写博客需要使用到Markdown语法,详情可查看本人的另外一篇博客markdown语法。里面有Markdown的基础语法。 注意:以下在配置.yml配置文件的时候注意yml的语法,yml是有严格的规则的。以免出现不必要的错误。 yml的语法
教程分三个部分
第一部分hexo的初级搭建还有部署到github page上,以及个人域名的绑定。 Hexo简介Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。 Hexo搭建步骤
1. 安装GitGit是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章,上传到GitHub的工具。Git非常强大,我觉得建议每个人都去了解一下。廖雪峰老师的Git教程写的非常好,大家可以了解一下。Git教程 windows:到git官网上下载,Download git,下载后会有一个Git Bash的命令行工具,以后就用这个工具来使用git。 linux:对linux来说实在是太简单了,因为最早的git就是在linux上编写的,只需要一行代码
安装好后,用 2. 安装nodejsHexo是基于nodeJS编写的,所以需要安装一下nodeJs和里面的npm工具。 windows:nodejs选择LTS版本就行了。 linux:
安装完后,打开命令行
检查一下有没有安装成功 顺便说一下,windows在git安装完后,就可以直接使用git bash来敲命令行了,不用自带的cmd,cmd有点难用。 3. 安装hexo前面git和nodejs安装好后,就可以安装hexo了,你可以先创建一个文件夹blog,然后 输入命令
依旧用 至此就全部安装完了。 接下来初始化一下hexo
这个myblog可以自己取什么名字都行,然后
新建完成后,指定文件夹目录下有:
打开hexo的服务,在浏览器输入localhost:4000就可以看到你生成的博客了。 大概长这样: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8BM5MvS-1635445653496)(如何搭建个人博客/1.jpg)] 4.GitHub创建个人仓库首先,你先要有一个GitHub账户,去注册一个吧。 注册完登录后,在GitHub.com中看到一个New repository,新建仓库 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q6LLBXrI-1635445653498)(如何搭建个人博客/2.jpg)] 创建一个和你用户名相同的仓库,后面加.github.io,只有这样,将来要部署到GitHub page的时候,才会被识别,也就是xxxx.github.io,其中xxx就是你注册GitHub的用户名。我这里是已经建过了。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kw2VHjSm-1635445653501)(如何搭建个人博客/3.png)] 点击create repository。 5. 生成SSH添加到GitHub回到你的git bash中,
这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。 可以用以下两条,检查一下你有没有输对
然后创建SSH,一路回车
创建SSH是会提示你输入保存路径,用默认即可,你只需要指定一个保存文件的名字,比如/c/Users/Amarao/.ssh/0729XGHGitHub(可以不设置,回车就行) 还会提示你输入SSH登陆密码,可以不设置 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7lqxE9F-1635445653505)(如何搭建个人博客/4.png)] 补充:在新生成密钥的时候,经常会报这样的错误
这是因为少了一个known_hosts文件,本来密钥文件应该是三个,现在是两个,便报了这样的错误,此时选择yes回车之后,便可,同时生成了缺少了的known_hosts文件:
这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qp7XY9Tl-1635445653508)(如何搭建个人博客/5.jpg)] ssh,简单来讲,就是一个秘钥,其中, 打开公钥文件
而后在GitHub的setting中,找到SSH keys的设置选项,点击 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ISdYsG7F-1635445653513)(如何搭建个人博客/8.jpg)] 在gitbash中,查看是否成功
6.将hexo部署到GitHub这一步,我们就可以将hexo和GitHub关联起来,也就是将hexo生成的文章部署到GitHub上,打开站点配置文件
这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。
然后
其中 注意deploy时可能要你输入username和password。 得到下图就说明部署成功了,过一会儿就可以在 7. 设置个人域名现在你的个人网站的地址是 注册一个阿里云账户,在阿里云上买一个域名,我买的是 你需要先去进行实名认证,然后在域名控制台中,看到你购买的域名。 点解析进去,添加解析。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E5Rhdu9V-1635445653517)(如何搭建个人博客/10.jpg)] 其中,192.30.252.153 和 192.30.252.154 是GitHub的服务器地址。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OT2DWwe4-1635445653519)(如何搭建个人博客/11.jpg)] 登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUEJLV9L-1635445653520)(如何搭建个人博客/12.jpg)] 然后在你的博客文件source中创建一个名为CNAME文件,不要后缀。写上你的域名。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mgGxWkmv-1635445653521)(如何搭建个人博客/13.jpg)] 最后,在gitbash中,输入
过不了多久,再打开你的浏览器,输入你自己的域名,就可以看到搭建的网站啦! 接下来你就可以正式开始写文章了。
然后在source/_post中打开markdown文件,就可以开始编辑了。 当你写完的时候,再
就可以看到更新了。 第二部分hexo的基本配置,更换主题,实现多终端工作,以及在coding page部署实现国内外分流。 1. hexo基本配置在文件根目录下的 网站
其中, 网址
在这里,你需要把 permalink,也就是你生成某个文章时的那个链接格式。 比如我新建一个文章叫 以下是官方给出的示例,关于链接的变量还有很多,需要的可以去官网上查找 永久链接 。
再往下翻,中间这些都默认就好了。
接下来这个 Front-matterFront-matter 是你要书写的blog的Markdown文件的最上方以
下是预先定义的参数,您可在模板中使用这些参数值并加以利用。
其中,分类和标签需要区别一下,分类具有顺序性和层次性,也就是说
layout(布局)当你每一次使用代码
它其实默认使用的是 Hexo 有三种默认布局:
而new这个命令其实是:
只不过这个layout默认是post罢了。 page如果你想另起一页,那么可以使用
系统会自动给你在source文件夹下创建一个board文件夹,以及board文件夹中的index.md,这样你访问的board对应的链接就是 draftdraft是草稿的意思,也就是你如果想写文章,又不希望被看到,那么可以
这样会在source/_draft中新建一个newpage.md文件,如果你的草稿文件写的过程中,想要预览一下,那么可以使用
在本地端口中开启服务预览。 如果你的草稿文件写完了,想要发表到post中,
就会自动把newpage.md发送到post中。 2. 更换主题到这一步,如果你觉得默认的 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqrQIzeb-1635445653523)(如何搭建个人博客/14.jpg)] 这里有200多个主题可以选。不过最受欢迎的就是那么几个,比如NexT主题,非常的简洁好看,大多数人都选择这个,关于这个的教程也比较多。不过我选择的是hueman这个主题,好像是从WordPress移植过来的,展示效果如下: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z237kEcg-1635445653525)(如何搭建个人博客/15.jpg)] 不管怎么样,至少是符合我个人的审美。 直接在github链接上下载下来,然后放到 而后进入
menu(菜单栏)也就是上面菜单栏上的这些东西。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bjZeYlUR-1635445653526)(如何搭建个人博客/16.jpg)] 其中,About这个你是找不到网页的,因为你的文章中没有about这个东西。如果你想要的话,可以执行命令
它就会在根目录下 如果你想要自己再自定义一个菜单栏的选项,那么就
然后在主题配置文件的menu菜单栏添加一个 customize(定制)在这里可以修改你的个人logo,默认是那个hueman,在
tips: 在这里可以添加一个rss功能,也就是那个符号像wifi一样的东西。 添加RSS1. 什么是RSS? RSS也就是订阅功能,你可以理解为类似与订阅公众号的功能,来订阅各种博客,杂志等等。 2. 为什么要用RSS? 就如同订阅公众号一样,你对某个公众号感兴趣,你总不可能一直时不时搜索这个公众号来看它的文章吧。博客也是一样,如果你喜欢某个博主,或者某个平台的内容,你可以通过RSS订阅它们,然后在RSS阅读器上可以实时推送这些消息。现在网上的垃圾消息太多了,如果你每一天都在看这些消息中度过,漫无目的的浏览,只会让你的时间一点一点的流逝,太不值得了。如果你关注的博主每次都发的消息都是精华,而且不是每一天十几条几十条的轰炸你,那么这个博主就值得你的关注,你就可以通过RSS订阅他。 在我的理解中,如果你不想每天都被那些没有质量的消息轰炸,只想安安静静的关注几个博主,每天看一些有质量的内容也不用太多,那么RSS订阅值得你的拥有。 3. 添加RSS功能 先安装RSS插件
而后在你整个项目的
这个时候你的RSS链接就是 域名 所以,在主题配置文件中的这个
4. 如何关注RSS? 首先,你需要一个RSS阅读器,在这里我推荐 每次需要关注某个博主时,就点开他的RSS链接,把链接复制到 我关注的比如,阮一峰的网络日志,月光博客,知乎精选等,都很不错。当然,还有我!!赶快关注我吧!你值得拥有:http://fangzh.top/atom.xml 在安卓端,inoreader也有下载,不过因为国内google是登录不了的,你需要在inoreader官网上把你的密码修改了,然后就可以用账户名和密码登录了。 在IOS端,没用过,好像是reader 3可以支持inoreader账户,还有个readon也不错,可以去试试。 widgets(侧边栏)侧边栏的小标签,如果你想自己增加一个,比如我增加了一个联系方式,那么我把 然后在
search(搜索框)默认搜索框是不能够用的,
它已经告诉你了,如果想要使用,就安装这个插件。
如果这个包已经存在,会报错。 但是你需要在你博客的根目录下,找到 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cFGckRFR-1635445653528)(如何搭建个人博客/17.png)]
comment(评论系统)这里的多数都是国外的,基本用不了。这个 miscellaneous(其他)这里我就改了一个 总结:整个主题看起来好像很复杂的样子,但是仔细捋一捋其实也比较流畅,
3. git分支进行多终端工作问题来了,如果你现在在自己的笔记本上写的博客,部署在了网站上,那么你在家里用台式机,或者实验室的台式机,发现你电脑里面没有博客的文件,或者要换电脑了,最后不知道怎么移动文件,怎么办? 在这里我们就可以利用git的分支系统进行多终端工作了,这样每次打开不一样的电脑,只需要进行简单的配置和在github上把文件同步下来,就可以无缝操作了。 机制机制是这样的,由于 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p0EZ85BF-1635445653529)(如何搭建个人博客/18.jpg)] 也就是上传的是在本地目录里自动生成的 其他文件 ,包括我们写在source 里面的,和配置文件,主题文件,都没有上传到github [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gsFz5jDd-1635445653531)(如何搭建个人博客/19.jpg)] 所以可以利用git的分支管理,将源文件上传到github的另一个分支即可。 上传分支首先,先在github上新建一个hexo分支,如图: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ErnbLBcC-1635445653532)(如何搭建个人博客/20.jpg)] 然后在这个仓库的settings中,选择默认分支为hexo分支(这样每次同步的时候就不用指定分支,比较方便)。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PlBPxrPM-1635445653534)(如何搭建个人博客/21.jpg)] 然后在本地的任意目录下,打开git bash,
将其克隆到本地,因为默认分支已经设成了hexo,所以clone时只clone了hexo。 接下来在克隆到本地的 把之前我们写的博客源文件全部复制过来,除了
注意,如果你之前克隆过theme中的主题文件,那么应该把主题文件中的 而后
这样就上传完了,可以去你的github上看一看hexo分支有没有上传上去,其中 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rD3JYTFH-1635445653535)(如何搭建个人博客/22.jpg)] 这样就上传完了。 更换电脑操作一样的,跟之前的环境搭建一样,
但是已经不需要初始化了, 直接在任意文件夹下,
然后进入克隆到的文件夹:
生成,部署:
然后就可以开始写你的新博客了
Tips:
关于第四步在coding page部署实现国内外分流与第三部分hexo添加各种功能,包括搜索的SEO,阅读量统计,访问量统计和评论系统等。本人没有操作,详情可查看Fangzh的hexo史上最全搭建教程这篇博客。 |
|
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 | -2024/12/23 21:25:25- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |