使用hexo + github搭建个人博客网站

news/2024/5/15 15:52:22/文章来源:https://aflyun.blog.csdn.net/article/details/99725590

640?wx_fmt=gif

做一个积极的人编码、改bug、提升自己

我有一个乐园,面向编程,春暖花开!


搭建个人 博客,手把手教程,,感谢长风破! 一个在技术路上努力的勇者!


我搭建的博客地址:http://www.aflyun.work/


长风破浪惠有时,直挂云帆济沧海。

导读:博客除了知道的有CSDN,博客园之类的。很多都有自己专属的个人博客。昨天花了一下午加一晚上的时间搭建好。依托的是gitHub pages服务+hexo来搭建。使用github pages服务搭建博客的好处是访问速度快(全是静态文件)、免费搭建、不需要服务器和后台、绑定域名方便。趁热打铁,整理出我的搭建指南,欢迎收藏。话不多说,开始正篇。

个人博客搭建流程:

640?wx_fmt=png

一、搭建所需环境的配置

1、注册GitHub账号

说明:个人博客是依托于GitHub pages服务

2、安装node.js

说明:node.js是为了后面下载安装使用hexo(博客搭建框架)。

3、安装git客户端

说明方便与GitHub配合使用来进行代码的托管,后面的所有指令都是在git上来输入。

二、搭建github博客

在github上创建仓库,新建一个(必须)名为 用户名.github.io的仓库。例如:我的用户名为SailSpring,则创建SailSpring.github.io的仓库,将来博客的访问网址就是http://sailspring.github.io/。

说明:每一个github账户只能创建一个这样可以直接使用域名访问的仓库

注意:

  • GitHub的注册邮箱要验证

  • 仓库名必须为:用户名.github.io

    640?wx_fmt=png

此时(一般仓库创建并可以访问需要10分钟左右)就可以通过域名http://用户名.github.io/进行访问,但里面没有内容,会报404

三、配置SSH key

配置ssh key是为了提交代码时要拥有你的GitHub权限才可以,直接使用用户名,密码不安全,使用ssh key解决本地和服务器的连接问题。

1、检查本机是否已存在ssh密钥,提示No such file or directory 说明第一次使用git。

$ cd ~/. ssh

2、连续按3次回车,会在用户根目录生成 .ssh/id_rsa的文件,用记事本打开后,复制。

640?wx_fmt=png

3、打开GitHub主页,进入setting—>SSH and GPG keys——>New SSH key,将复制的内容粘贴到key,title可以自己定义,然后点击Add SSH key即可。

640?wx_fmt=png

4、测试SSH Key是否配置成功

  • 输入:

$ ssh -T git@github.com
  • 会出现如下提示,输入yes即可:

Are you sure you want to continue connecting (yes/no)?
  • 看到如下信息说明SSH配置成功

Hi SailSpring(用户名)! You've successfully authenticated, but GitHub does not provide shell access.
  • 此时还需要配置

$ git config --global user.name "SailSpring"// github用户名,非昵称
$ git config --global user.email  "xxx@**.com"// 你的github注册邮箱

四、使用hexo写博客

4.1 hexo简介

主页:https://hexo.io/zh-cn/

640?wx_fmt=png

640?wx_fmt=png

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具,支持Markdown格式,有众多优秀插件和主题。

4.2 hexo原理

GitHub pages存放的都是静态文件。hexo所做的是将md格式的文件都放在本地,每次写完文章后调用命令来批量生成页面,然后将有改动的页面提交到GitHub。实现动态内容,不需要手动去更新博文目录和相关链接信息。

4.3 hexo安装(在git客户端上输入命令)

$ npm install -g hexo

4.4 初始化

在本地创建一个文件夹,这个文件夹是用来存放代码的地方,文件夹名可以自己定义:比如我的是 D:\Workspaces\hexo

在git客户端输入

$ cd /d/Workspaces/hexo/
$ hexo init

此时hexo会下载博客页面所需文件到该目录:

640?wx_fmt=png

输入如下命令

$ hexo g # 生成
$ hexo s # 启动服务

hexo会在public文件夹下生成相关的html文件,这些文件都是要提交到GitHub上去:

640?wx_fmt=png

说明:hexo s是开启本地预览服务,输入 http://localhost:4000即可访问,如果加载不出来就是端口号被占用,修改端口号即可

如下为hexo自带的主体渲染出的页面:

640?wx_fmt=png

4.5 主题的下载与修改

个人博客网站,那就要按照个人的审美去选出自己喜欢的主题,那一起来选一个好看的主题:https://hexo.io/themes/

640?wx_fmt=png

比如选定BMW主题,点眼睛图标预览,点底下蓝色的字,即可进到GitHub的clone页面,复制克隆地址

640?wx_fmt=png

利用命令行下载主题:

$ cd /d/Workspaces/hexo/
$ git clone https://github.com/dongyuanxin/theme-bmw.git themes/bmw

下载好后主题都在hexo文件夹下的themes里面:

640?wx_fmt=png

修改hexo文件夹下的_config.yml中的theme: landscape 改为 theme: bmw,保存。这里注意,必须加空格在theme和后面主题名之间。

640?wx_fmt=png

执行hexo g重新渲染生成,hexo s运行并预览。(如果出现问题,可使用hexo clean 命令是用来清理public中的内容,重新生成发布)

4.6 上传

说明:hexo提交代码时会将以前的所有代码都删掉,上传代码之前记得养成下载的习惯。(虽然GitHub有版本管理,但要养成备份的习惯)

上传之前将hexo文件夹下的_config.yml中的deploy部分,:与内容之间要加空格:

deploy:type: gitrepository: git@github.com:SailSpring/SailSpring.github.io.git    //根据自己的名称定义branch: master

并安装插件:

$ cd /d/Workspaces/hexo/
npm install hexo-deployer-git

最后输入hexo d会将有改动的代码全部提交。

浏览器输入网址https://用户名.github.io/ 即可查看效果

640?wx_fmt=png

4.7 写博客

定位到hexo目录,执行命令:

hexo new "Hello Friend"

就会在…/hexo/source/_posts下生成相关的md格式的文件:

640?wx_fmt=png

打开这个文件,就可以写博客了(推荐一个markdown编辑器Typora),默认生成内容如下:(也可以直接新建md格式的文件,这个命令的好处是自动生成时间)

进行编辑,在合适的位置加上<!--more-->,可以设置文章摘要的长度,不会将博文目录显示全部文章内容

640?wx_fmt=png

然后渲染并上传

$ hexo g
$ hexo d

效果如下:

640?wx_fmt=png

640?wx_fmt=png

自此我们的博客就搭建完了。可通过域名 https://用户名.github.io/ 进行访问

4.7 补充

对于要想更熟练的使用推荐的markdown编辑器Typora推荐阅读博客https://blog.csdn.net/mingzhuo_126/article/details/79941450

还有就是熟练hexo的基本操作命令:

hexo常见命令:

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令:

hexo s -g #生成并本地预览
hexo d -g #生成并上传

五、购买绑定域名(以阿里云为例)

阿里云网址:https://www.aliyun.com/

  • 注册新用户登录

  • 域名购买

  • 在GitHubde的用户名.github.io 仓库下新建CNAME文件,无后缀,里面填写阿里云的域名并保存

    640?wx_fmt=png

  • (在阿里云平台中)云解析DNS(云解析DNS就是指把网站域名或应用资源转换为数字 IP地址,从而将最终用户的访问路由到相应的网站或应用资源上。)

    640?wx_fmt=png

  1. 记录CNAME类型,对应GitHub上的域名,用户名.github.io,目的是为了实现购买的域名指向GitHub域名

  2. 记录A类型,对应 “ping 用户名.github.io”出的物理地址,域名直接指向

这是最后的效果,也是我的个人博客网站:www.dreamsail.work

640?wx_fmt=png

六、参考资料

小茗同学 搭建个人博客网站

https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html

最后

前天搭建了一下午+一晚上,准确来说昨天到今天凌晨刚整理完搭建指南。后面使用过程中有所其他收获也会分享出来。

最后的最后外面下雨了,听歌回去了,各位晚安。

640?wx_fmt=gif

宝剑锋从磨砺出,梅花香自看一看来...

640?wx_fmt=gif

Write the code,Free my world!


640?wx_fmt=png

谢谢你的阅读,祝你有所收获,也愿你每天开心愉快!

如果觉得本文对你有所帮助,欢迎转发,您的转发,就是对我最大的鼓励


640?wx_fmt=jpeg

Java相关技术

高效软件工具

干货技术资源

前沿技术分享

FOLLOW US


你点的每个在看,我都当成了喜欢!

640?wx_fmt=gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_745467.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

32个设计非常精美的国外网站作品范例(上篇)

让网站的设计能够吸引用户的眼球是每一个专业网页设计师的梦想。为了让网站更具吸引力&#xff0c;设计师们在设计之前需要在头脑中规划好排版、字体的选择、插图以及配色方案等等。因此&#xff0c;要设计出一个精美的网站对于设计师们来说是件非常有挑战的事情。今天这篇文章…

大型网站技术架构(六)网站的伸缩性架构

2019独角兽企业重金招聘Python工程师标准>>> 网站系统的伸缩性架构最重要的技术手段就是使用服务器集群功能&#xff0c;通过不断地向集群中添加服务器来增强整个集群的处理能力。“伸”即网站的规模和服务器的规模总是在不断扩大。 1、网站架构的伸缩性设计 网站的…

如何在网页上显示其他网站的数据_这里有一份HTML的超全教程,自学建网站不再是梦...

在互联网高速发展的今天&#xff0c;我们通过浏览器可以看到各种各样的网站&#xff0c;包含了各式不同的领域还有内容&#xff0c;通过点击网站上的标签和栏目我们就能够很方便地看到网站上显示的各种数据&#xff0c;而这些都是建立在HTML这种标记语言的基础上做到的。HTML的…

浏览器打开出现证书错误_IE提示已阻止此网站显示有安全证书错误的内容

问&#xff1a;访问邮箱、支付宝等网站时&#xff0c;IE提示已阻止此网站显示有安全证书错误的内容&#xff0c;无法继续操作&#xff0c;怎么办&#xff1f;答&#xff1a;推荐使用以下三步法排查、解决该问题&#xff01;第一步&#xff1a;看一下你的系统时间是否正确。看清…

百度分享代码_wordpress商城网站添加分享按钮方法

前面好一佳说到了wordpress商城网站设置网站客服方法&#xff0c;你是不是已经学到了&#xff0c;简单的吧。一个网站如果做得好了&#xff0c;客户喜欢了&#xff0c;是不是就很想把这个网站分享给自己的朋友&#xff0c;这个时候分享按钮就显得格外的重要了&#xff0c;如果一…

python中series怎么重建索引_搜索引擎优化中网站的分类和标签怎么设置 - 公司动态...

在搜索引擎优化&#xff0c;大型的网站中我经常会看到有着乱七八糟分类和标签。为内容增加分类和标签是分类系统中典型的方法&#xff0c;如果使用得当&#xff0c;将会增强搜索引擎优化。但如果使用不当&#xff0c;可能会影响体验&#xff0c;甚至排名。下面和搜索引擎优化小…

九天自助建站系统_尝试使用自助建站系统做网站

找程序员开发网站不是建站唯一方法&#xff0c;做网站也可以选择用“自助建站系统”&#xff0c;实现在没技术能力情况下&#xff0c;独立开发制作出一个网站&#xff0c;下面就来体验看下自助建站系统如何做网站&#xff01;这里我们拿“建站宝盒”自助建站系统为案例&#xf…

百度刷相关wf5搜_微信搜一搜SEO是什么?新媒体运营一定知道,帮你自动增粉!...

微信搜一搜大家应该都知道&#xff0c;一般用户会搜查热门话题文章、相关朋友圈、找找视频表情包啥的&#xff0c;一般的新媒体小编就会搜搜同行有哪些新文章&#xff0c;找找问答之类的&#xff0c;(新媒体运营注意了)这个时候就会粉丝悄悄的关注我们公众号&#xff0c;进入小…

qt 显示加速_Cloudflare 入门教程:使用 Cloudflare 免费 CDN 加速 amp; 保护自己的网站...

前言之前也发布过 Cloudflare 系列教程&#xff0c;但是时间久了&#xff0c;界面和操作有些变化&#xff0c;对于新手在操作时可能有点摸不着头脑。本文定位为「小白向的 Cloudflare 入门配置教程」&#xff0c;主要讲下 Cloudflare CDN 的使用方法。详细介绍下如何在 Cloudfl…

把百度网站设为首页_企业网站关键词怎么优化上百度首页?提升排名技巧有哪些?...

随着移动互联网的发展&#xff0c;特别是当小伙伴们已习惯了通过网络平台寻找自己想要的东西&#xff0c;所以&#xff0c;企业的发展目标不得不转移阵地&#xff0c;这样才可以在众多网站中脱颖而出&#xff0c;站稳脚跟。然而&#xff0c;现在的小伙伴们通过关键词搜索查找资…

酷站设计:学习扁平化网站设计的12个优秀案例

扁平化设计对于印刷品设计、网页设计和移动操作系统的设计来都带去了新的变化。扁平化网页设计是指设计形式摒弃图案纹理背景&#xff0c;阴影文字以及网站盒模型的部分。 谷歌是第一个使用扁平化设计准备对重构 Web 应用程序的公司&#xff0c;现在越来越多的公司正在效仿。这…

Java开发牛人十大必备网站

英文原文&#xff1a; Top 10 Websites for Advanced Level Java Developers 以下是我收集的 Java 开发牛人必备的网站。这些网站可以提供信息&#xff0c;以及一些很棒的讲座&#xff0c; 还能解答一般问题、面试问题等。质量是衡量一个网站的关键因素&#xff0c;我个人认为…

扫描特定网站(页)的更新链接(附完整源码下载)

闲暇时间经常登录小说网站和论坛&#xff08;比如啃书&#xff09;&#xff0c;翻看自己感兴趣的连载小说。时常会碰到以下问题&#xff1a; 1、要打开网页花时间查找自己感兴趣的链接&#xff0c;耗时又无聊啊 2、某天比较忙或出差较长一段时间&#xff0c;没空去浏览或保存自…

淘宝商城,亚洲最大网上购物网站

淘宝商城&#xff0c;亚洲最大网上购物网站——淘宝网打造的在线B2C购物平台&#xff08;B2C&#xff0c;Business to Customer&#xff09;。在淘宝商城购物&#xff0c;享受100%正品保障、7天退换货、提供发票的服务。 Q1>按照要求申请入驻商城一定可以成功吗&#xff1f;…

如何真正提高ASP.NET网站的性能《转载》

文章出处 前言 怎么才能让asp.net网站飞得更快&#xff0c;有更好的性能&#xff1f;——这是很多开发者常常思考的一个问题。我有时候会做大量的测试&#xff0c;或请求别人帮忙采集一些数据&#xff0c;希望能够验证网上一些专家的建议或证明自己的一些猜想。 理论上讲&#…

【记录】网站打不开,提示118错误,网络连接失败的问题

今天早上来&#xff0c;我的好几个小站都打不开了&#xff0c;都提示118错误&#xff0c;网络连接失败不知道怎么办呢&#xff1f; 一开始是用ping了一下&#xff0c;发现是网络连接问题&#xff0c;有的地区ping不出来&#xff0c;最后又出现了502提示。 1、开始118连接错误&a…

datalist获取id传到下一个页面_linux下部署tomcat网站

linux配置、部署tomcat网站总流程本流程使用securecrt8.1进行远程服务器连接&#xff0c;secureCRT使用细节本文不做讲解&#xff0c;有兴趣的朋友可以上网搜索相关教程。注&#xff1a; xxx用于描述本人自定义名称&#xff0c;不是固定字符。Linux系统&#xff1a;centos6.4Jd…

scrapy爬虫_scrapy + mogoDB 网站爬虫

工具环境语言&#xff1a;python3.6数据库&#xff1a;MongoDB (安装及运行命令如下)python3 -m pip install pymongobrew install mongodbmongod --config /usr/local/etc/mongod.conf框架&#xff1a;scrapy1.5.1 (安装命令如下)python3 -m pip install Scrapy用 scrapy 框架…

js alert文字不能复制_呕心沥血做的网站,几个月才做完,被他人一夜全抄走...如何防止JS代码被抄?...

近日看到有人提出这样的需求&#xff0c;场景是这样的&#xff1a;“大牛在哪&#xff01;我呕心沥血做的网页设计和网站&#xff0c;做了几个月才做完&#xff0c;JS代码写了好几个月&#xff0c;被他人一夜全抄走&#xff0c;毫无办法.... 如何是好&#xff1f;&#xff01;”…

【Asp.Net从零开始】:Web 应用程序项目与网站项目之间的差异

Web 应用程序项目与网站项目 .NET Framework 412&#xff08;共 14&#xff09;对本文的评价是有帮助 - 评价此主题在 Visual Studio 中&#xff0c;可以创建“Web 应用程序项目”或“网站项目”。 每种项目类型各有优缺点&#xff0c;要选择可以满足需要的最佳项目类型&#x…