【教你搭建服务器系列】 (11)使用GitHub+Hexo搭建自己的网站、博客

news/2024/5/15 11:05:29/文章来源:https://blog.csdn.net/yudianxiaoxiao/article/details/118243399

我白嫖过的一些云厂商:

云服务器厂商学生身份新用户(非学生身份)
腾讯云学生特惠,1核2G5M宽带,仅需9元/1个月星星海SA2云服务器,1核2G首年99元(答主目前用的)
不知道还有没有券,可以试试
新客户无门槛代金券,价值高达2860元代金券
云产品限时秒杀,爆款1核2G云服务器,首年99元
阿里云精选云服务器1核2G 新人仅需87元/年
百度云1核2G 学生身份 9 元/1个月
华为云1核2G首年99元起,首月仅需9月【华为云-精选云服务器2折起】(偏贵)
七牛云对象存储服务每月10GB免费空间(用做云存储)

以上是答主我从学生时代到打工人薅过最便宜的云服务器,建议大家有学生身份或者新用户身份的都去试试。


前面提到的都是有个人服务器和域名的,那在没有服务器又没有域名的情况下,我们想搭建自己的网站,该如何做呢?

GitHub托管了每个用户的仓库,利用这个仓库可以免费为用户提供一个静态网站,你甚至不需要申请域名,这就是我们常说的GitHubPages。


Hexo 是一个静态博客框架,基于 Node.js,将 Markdown 文章通过渲染引擎,生成一个静态网页。

两者结合则可以搭建自己的博客了。

hexo官网:https://hexo.io/zh-cn/docs/themes.html

1、安装git

git下载地址:https://git-scm.com/downloads

git安装完成后,右击文件夹出现Git Gui HereGit Bash Here 选项表示安装成功:

2、安装Node

下载:https://nodejs.org/en/download/

新版的Node都是安装了 npm 模块

如果执行 node -v 报错的话,那么手动将 Node.js 的安装路径添加到环境变量中。

如果npm很慢,可以配置taobao的镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

配置后,使用 cnpm 代替 npm 命令即可。

3、注册GitHub,新建仓库

新建仓库要 带上README.md

新建完成则查看仓库 的 setting,拉到最后,找到GitHub Pages,选中分支:

保存后你发现你的网站的URL就生成了,点击网站就直达你的README.md首页了。

格式都是 用户名.github.io + 仓库名

但是现在GitHubPage还没有样式,下一步可以配合Hexo下载自己的主题。

4、下载Hexo

1、安装hexo

执行:npm install hexo -g

F:\笔记\LearnJavaToFindAJob>npm install hexo -g
npm WARN deprecated fsevents@2.1.3: Please update to v 2.2.x
C:\Users\Administrator\AppData\Roaming\npm\hexo -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\hexo\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\hexo\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ hexo@5.3.0
added 92 packages from 370 contributors in 588.186s

2、检查是否安装成功

输入 hexo -v

F:\笔记\LearnJavaToFindAJob>hexo -v
(node:17708) ExperimentalWarning: The fs.promises API is experimental
hexo-cli: 4.2.0
os: Windows_NT 10.0.18362 win32 x64
http_parser: 2.8.0
node: 10.16.0
v8: 6.8.275.32-node.52
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 4
openssl: 1.1.1b
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019a

如果找不到 hexo 命令,检查一下Node的环境变量。

3、初始化

本地新建一个存放你博客项目的文件夹,我这里新建一个LearnJavaToFindAJob,输入 hexo init

过程比较长。

F:\笔记\LearnJavaToFindAJob> hexo init
(node:18480) ExperimentalWarning: The fs.promises API is experimental
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 188 packages from 443 contributors and audited 194 packages in 246.397s
found 0 vulnerabilitiesINFO  Start blogging with Hexo!

出现 INFO Start blogging with Hexo! 表示成功了。

4、部署

(1)清除缓存文件 (db.json) 和已生成的静态文件 (public)。

 hexo clean

(2)生成静态文件。

hexo g

即generate。

(3)启动

hexo s

启动服务器。默认情况下,访问网址为: http://localhost:4000/

如果端口被占用,可以使用 hexo server -p 端口号 来启动。

更多hexo命令,参考官方文档:https://hexo.io/zh-cn/docs/commands

我这里使用

hexo -g

hexo -s 启动hexo

访问:http://localhost:4000/,表示成功启动,这是默认的hexo主题:

可以使用 hexo clean && hexo g && hexo s 一步到位

5、绑定Github page

打开本地博客目录,修改 _config.yml 文件

加上你的GitHub项目地址:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:type: gitrepo: https: https://github.com/DogerRain/LearnJavaToFindAJob.gitbranch: master

如果你是第一次使用Git,需要先把你本地的账户密码配置好。

推送到GitHub仓库:

deploy d

如果报错:Deployer not found: git

解决方法:

执行:npm install --save hexo-deployer-git

但是这个太慢了,建议配置taobao的镜像源(上面提到),然后执行cnpm install --save hexo-deployer-git

出现以下发布成功:

可能需要配置GitHub的账户密码。

输入即可,然后再打开你的GitHubPage 的URL,发现你的博客就部署完成了。

6、配置分类、标签

1、创建“分类”选项

hexo默认是按时间(年月日)分类,如果自定义分类:

hexo new page categories

生成文件\source\categories\index.md

F:\笔记\LearnJavaToFindAJob>hexo new page categories
(node:4940) ExperimentalWarning: The fs.promises API is experimental
INFO  Validating config
INFO  Created: F:\笔记\LearnJavaToFindAJob\source\categories\index.md

打开这个index.md文件,加入 categories :

title: categories
date: 2021-01-02 20:52:32
type: "categories"

2、创建“标签”选项

默认是没有标签的,生成标签:

hexo new page tags

生成文件\source\tags\index.md

F:\笔记\LearnJavaToFindAJob>hexo new page tags
(node:20492) ExperimentalWarning: The fs.promises API is experimental
INFO  Validating config
INFO  Created: F:\笔记\LearnJavaToFindAJob\source\tags\index.md

打开这个index.md文件,加入 tags:

title: tags
date: 2021-01-02 21:09:10
type: "tags"

3、打开你要部署的md文件

我这里要部署一篇文章,打开文章,在头部声明分类和标签

---
title: HaC教你搭建服务器(一)
date: 2021-01-02 20:52:32
categories: 
- HaC的建站
tags:
- 服务器
- 建站
---

categories 只能有一个,如果有多个默认取第一个;tags 可以有多个

执行 hexo clean && hexo g && hexo s

再打开,就发现分类、标签 出来了:

要添加更多的归档或者自定义分类,参考:https://www.jianshu.com/p/ebbbc8edcc24

7、切换主题

默认的主题可能不好看,如果要切换主题怎么办呢?

打开:https://hexo.io/themes/

这里有很多hexo的主题。

到了这里,你基本就可以搭建自己的GitHubPage了,hexo还有很多有趣的功能,比如说评论、代码高亮、订阅,喜欢的筒子们可以自己捣鼓。

其他主题的预览可以参考一下这个:

https://blog.csdn.net/zgd826237710/article/details/99671027

比如说Butterfly主题:

Hexo搭建出来的博客颜值都是蛮高的。

除此之外,还有很多静态博客的生成工具,比如说 jekyll、Hugo 等等,可以在这里选择你想要的静态博客工具:

https://www.cnblogs.com/buyz/p/10935831.html

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

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

相关文章

11个前端工程师必备的网站

好多小伙伴有疑问,就是说有哪些值得去关注的前端网站,我知道大家可能都苦于找不到一些有价值的,还有值得信赖的网站去学一些比较货真价实的前端技术。生怕有哪些水文或者是一些乱七八糟的网站,把咱们的这个知识给误导了。这里呢我准备了几个我…

2020年,给你7个程序员接私活必备网站!

2020互联网圈不好混,不是每个公司都能像蚂蚁金服一样这么大气,不少公司今年因为疫情已经开始裁员,不要抱怨,加油干就完事了! 今天给大家推荐几个赚钱养家的好渠道,一起来看看吧! 1、程序员客栈…

wordpress js 运行短代码_WP模板开发中,怎样给wordpress网站的文章,添加点赞功能?...

我们在网上浏览某些网站的文章时,在文章的结尾处,都会有一个点赞的按钮,如果觉得文章内容非常不错,就可以点击这个“点赞”按钮,给之篇文章进行点赞一下。在wordpress网站的模板主题开发中,我们可不可以也为…

java如何制作浪漫表白界面_表白网页在线制作详细教程-我要表白网-最浪漫的表白网页在线生成网站...

如何制作表白网页?如何提取背景音乐,图片链接呢?不要着急,答案全在这里 …编辑文字看到这个页面之后我们就开始制作只属于自己的表白网页了~把鼠标放到 点此编辑 这里就可以编辑文字了时间比如你跟TA是3月22日恋爱的,那…

python 爬带端口的网站_5分钟带你用Python爬完《剑来》小说(附完整代码)!

Python资源共享群:484031800思路:step 1 :请求《剑来》小说站点,获取两个东西小说名称——在Python程序同目录下,以小说名称创建文件夹每章小说的链接地址step 1 对应代码中的 get_url()函数 ,该函数还包括…

php与apache整合404,PHP网站从Apache转移到Nginx后产生404错误的原因和解决办法

这是转载的别人的解决方法:原案例分析:1、原来的网站在wamp环境下搭建完成,一切正常,上传到虚拟主机环境为lnmp,结果访问时可以打开主页,然后点其他页面全部报404错误;2、经分析得出原因&#x…

iis添加网站外网无法访问_2秒钟实现在IIS上面新建站点并发布Web应用

>> 点击上方 懒人MES 关注我们之前有写过一篇"教你两分钟使用ASP.NET CORE创建并发布一个Web应用“,今天分享一篇Powershell实例“只需2秒钟实现在IIS上面新建站点并发布Web应用”。在过去的一年工作中接触到很多服务器上应用迁移的任务,其中…

mysql 替换网址_mysql语句:网站批量http替换https技巧

网站开启https非常简单,先申请一个ssl证书;DigiCert 免费版 SSL证书可以通过阿里云、DNSPOD进行申请。通常30分钟左右即可申请成功,免费时间一年,第二年可以续签。将申请成功的证书安装在服务器端,成功开启SSL后&#…

php gb2312网站源码,闻名 PHP 企业网站系统 weenCompany v5.3.0 简体中文 GB2312

weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能&#xff…

前端设计类网站汇总

设计前端类网站汇总 一、素材类 1、图片 其实国内对图片版权保护这块的意识不是很够,在免费的素材库和收费素材库都能找到同一张图片,但作者署名却都不一样。所以小编现在基本不用国内这些图库网,跟大家推荐几个免费又没有版权纠纷的图库网站…

阿里云ecs怎么搭建网站

一、首先在阿里云开通一台服务器 二、开通服务器之前最好确定你的服务器用linux还是windows,这里小编推荐大家用linux的服务器,因为linux服务器稳定而且性能也比windows好! 三、安装网站环境 小编推荐宝塔面板,比较方便快捷&#…

图片优化_怎么优化图片?网站图片优化方法有哪些?

在搜索引擎算法不断的进步,算法不断的升级变化的情况下,很多站长纷纷表示无路可走,其实有时候换一种角度想一想,之所以搜索引擎实施一定的打压,那也正是说明了,做SEO还有别的路可走。为何有人表示说无路可走…

file 选择的图片作为背景图片_我用100行代码做了个网站,帮人PS旅行图片,赚个鸡腿吃!...

虽然不能出门,但是我们可以利用python来带领大家出去旅游,今天小编就带领大家利用python和Flask实现旅游的小目标,让大家足不出户,就能晒出自己的旅游照。01功能简介我们今天实现的小功能就是,利用python来提取我们的人…

debian8 php7,Debian8环境安装Apache/PHP7/MariaDB网站环境

一、添加PHP7数据源以及更新系统安装好的Debian后还不能使用sudo,需要使用root用户登陆后安装sudo命令apt-get install sudo添加PHP7数据源以及更新系统echo"deb http://repos.zend.com/zend-server/early-access/php7/repos ubuntu/" >> /etc/apt/sources.lis…

php网站iis7.5 session,IIS 7.5 asp Session超时时间设置方法

IIS 7.5 asp Session超时时间设置方法有时候在web.config设置sessionState 或者类文件里设置Session.Timeout,在IIS里访问时每次都是达不到时间就超时,原因是因为在IIS中设置了超时时间那么我们如何设置超时时间呢?1.IIS图形界面设置IIS6 在IIS里面右键点…

中国程序员开发的神奇网站:变量命名神器,这个有点意思!

有一种痛,不是程序员可能不懂,但如果是程序员一定懂,那就是给变量或函数命名。回想一下起名字这条路,刚开始学某个编程语言的时候,26 个字母还能解决问题,26 个不够还能用字母与数字的组合?。但是&#xf…

java相关技术网站,看完这一篇你就懂了

灵魂发问:我们为什么要学习SpringBoot??? 官方对 Spring Boot 的定位:Build Anything, Build 任何东西。Spring Boot 旨在尽可能快地启动和运行,并且只需最少的 Spring 前期配置。 同时我们也来…

FBI 网站都被黑了?

来源:快科技news.mydrivers.com/1/622/622871.htm4月13日,据外媒报道,一个黑客组织通过黑进数个联邦调查局(FBI)的附属网站,获取了成千上万条联邦特工和执法人员的个人信息,并计划出售。据悉&am…

你社交网站上的照片也许已经被用来训练人工智能了

毫无疑问,这张家庭照片是非常可爱的:照片中的爸爸留着短须,戴着无框眼镜,棕色头发的妈妈咧着嘴笑着。他们正和两个蹒跚学步的女儿一起嬉戏,同时品尝着冰淇淋。但是,这张照片于2013年被上传到照片分享网站Flickr上时&am…

@前端工程师,节约网站流量用这一招就够了!

作者 | 桃翁随着 Web 的发展,网站资源的流量也变得越来越大。据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力。有时候你花大力气去配置 WebPack 使打包体积减少&#xff0…