使用GitHub Pages+Hexo 搭建个人网站详细教程

news/2024/5/12 0:13:15/文章来源:https://blog.csdn.net/guoxiaorui666/article/details/99623023

文章目录

  • -GitHub Pages和Hexo的介绍
  • -安装Node.js
  • -安装Git
    • -验证是否安装成功
      • -点击Git Bash
      • -点击鼠标右键
  • -安装Hexo
    • -Hexo 初始化配置
    • -查看网站初始效果
  • - 将博客部署到 Github Pages 上
    • -注册git
    • -创建 repository
    • -配置GitHub账户信息
    • -配置SSH密钥
    • -在 GitHub 账户中添加你的公钥
    • -测试
  • -将本地的 Hexo 文件更新到 Github 的库中
  • - 编写文章并发布到博客上
  • - 更换Hexo的主题

-GitHub Pages和Hexo的介绍

  • GitHub :GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub
  • GitHub Pages :是用来托管 GitHub 上静态网页的免费站点
  • Hexo : Hexo 是一个简单、快速、强大的静态博客框架

-安装Node.js

Node.js官网 点击自己需要的版本默认安装即可
在这里插入图片描述

-安装Git

Git 官网 点击自己需要的版本默认安装即可
在这里插入图片描述

-验证是否安装成功

-点击Git Bash

在这里插入图片描述
打开之后出现下图的情况,说明安装成功
在这里插入图片描述

-点击鼠标右键

出现红框里的东西,就说明已经安装成功
在这里插入图片描述

-安装Hexo

  • Hexo就是我们的个人博客网站的框架, 这里需要自己在某个磁盘里创建一个文件夹,Hexo框架和以后你自己发布的网页都在这个文件夹中

我在E盘里创建了一个文件夹
在这里插入图片描述

  • 在该文件夹下右键鼠标,点击 Git Bash Here,输入npm 命令即可安装
  • 第一个命令表示安装 hexo,第二个命令表示安装 hexo 部署到 git page 的 deployer
$ npm install hexo-cli -g  
$ npm install hexo-deployer-git --save  

如图所示即为安装成功(安装比较慢,请耐心等待)
在这里插入图片描述

-Hexo 初始化配置

在刚才新建的文件夹里,再建一个文件夹Hexo,然后打开该文件夹,并打开Git Bash Here,输入下面的命令

$ hexo init

如图所示即安装成功
在这里插入图片描述

-查看网站初始效果

执行以下命令

$ hexo generate  
$ hexo server

如图所示即成功
在这里插入图片描述
然后登录 http://localhost:4000/ 查看效果:
在这里插入图片描述

- 将博客部署到 Github Pages 上

现在我们只能在本地连接里看到自己的博客网站,所以以下的操作是让其他人能够访问我们的网站

-注册git

点击git官网进行注册
在这里插入图片描述

-创建 repository

在这里插入图片描述
点击新建
在这里插入图片描述
按下面的图片进行操作
在这里插入图片描述

-配置GitHub账户信息

打开Git Bash 输入以下命令

 $ git config --global user.name "你的用户名"  $ git config --global user.email  "你的邮箱"

在这里插入图片描述

-配置SSH密钥

只有配置好 SSH 密钥后,我们才可以通过 git 操作实现本地代码库与 Github 代码库同步,在你第一次新建的文件夹里面点击Git Bash Here 输入以下命令:

$ ssh-keygen -t rsa -C "你的邮箱"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>
  • 这里的邮箱地址,输入注册 Github 的邮箱地址
  • -C的是大写的C

然后系统会要你输入密码:

Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>

在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容(其实没有必要设置密码)

注意:输入密码的时候没有输入痕迹的,不要以为什么也没有输入。

最后看到这样的界面,就成功设置ssh key了:
在这里插入图片描述

-在 GitHub 账户中添加你的公钥

运行下面的命令,将公钥的内容复制到系统粘贴板上

$ clip < ~/.ssh/id_rsa.pub

打开GitHub
在这里插入图片描述
在这里插入图片描述
$ clip < ~/.ssh/id_rsa.pub这个命令,在系统粘贴板上的内容粘贴上去就可以了
在这里插入图片描述
最后出现下面的画面
在这里插入图片描述

-测试

输入下面的命令(千万不要改动下面的命令,按照此模式直接输入就好了

$ ssh -T git@github.com

输入命令后和下面一样,直接在后面输入yes即可
在这里插入图片描述
最后会出现如下情况即说明设置正确
在这里插入图片描述
到现在为止 SSH Key 配置成功,本机已成功连接到 Github!!!

-将本地的 Hexo 文件更新到 Github 的库中

  • 登录GitHub打开项目

在这里插入图片描述

  • 打开你创建的 Hexo 文件夹打开该文件夹下的 _config.yml 文件,用记事本打开就可以

找到下图所示的位置,并按照图片进行修改
在这里插入图片描述

  • 在 Hexo 文件夹下分别执行以下命令
$ npm install hexo-deployer-git --save#该操作是安装deployer ,这样你才能将写好的文章部署到github上让别人浏览到

之后输入

$ hexo g -d

最后出现下图情况,说明博客部署到 Github 上了
在这里插入图片描述

  • 访问博客

你的博客地址:https://你的用户名.github.io,比如我的是:https://aixiaorui.github.io ,现在每个人都可以通过此链接访问你的博客了

- 编写文章并发布到博客上

  • 在Hexo目录下,带你家右键打开Git Bash,输入下面的命令,会创建一个后缀名为.md的文档
$ hexo n "文章标题"
  • 也可以直接在 \Hexo\source_posts 目录下右键鼠标新建文本文档,改后缀为 .md 即可

只不过我们用第一种方法它会自动生成如下的内容

$ hexo n "my first blog"

在这里插入图片描述
一般完整格式如下:
在这里插入图片描述
当文章写好之后,在Hexo目录下输入下面的命令发表到博客上:

$ hexo d -g

- 更换Hexo的主题

打开这个链接进入到Hexo的官网更换主题

我使用的是下面框起来的主题
在这里插入图片描述
点开之后滑到网页的最下面,点击矩形框内的链接
在这里插入图片描述
找到图内的位置,按它的步骤操作即可(注意要在themes目录下,输入命令)
在这里插入图片描述
下载完成后在themes目录下会又出现一个themes文件夹,此文件夹里面就是我们下载的主题
在这里插入图片描述
themes文件夹里面的文件

在这里插入图片描述
我们先把material-x文件移出来,然后把themes文件夹删除

按照下面的图片打开文档
在这里插入图片描述
把主题改成我们下载的主题
在这里插入图片描述
返回 Hexo 目录,右键 Git Bash ,输入以下命令开始部署主题:

$ hexo g   
$ hexo s

此时访问 http://localhost:4000/ 就可看见我们的主题已经更换了,如果感觉效果满意,我们就可以把它部署到Github上了

打开 Hexo 文件夹,右键 Git Bash,输入以下命令:

 $ hexo clean  //该命令的作用是清除缓存,若不输入此命令,服务器有可能更新不了主题$ hexo g -d

这样我们的主题就更换完毕了

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

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

相关文章

大型网站架构的演变

大型网站架构演变 转自&#xff1a;http://wenku.baidu.com/view/52b477b765ce0508763213c8.html 今天我们来谈谈一个网站一般是如何一步步来构建起系统架构的&#xff0c;虽然我们希望网站一开始就能有一个很好的架构&#xff0c;但告诉我们事物是在发展中不断前进的&#xff…

[转]李平:大型网站的灵魂——性能

这篇文章&#xff0c;可以对才入换联网&#xff0c;还没形成整体概念的人&#xff0c;提供一些基础入门&#xff0c;特别从请求开始到结束部分&#xff0c;了解了解 还是不错的。 原文地址&#xff1a;http://www.csdn.net/article/2014-09-30/2821940 什么是性能 有人说性能就…

提高网站速度的最佳实践

今天偶尔在网上看到了这篇文章&#xff0c;http://developer.yahoo.com/performance/rules.html&#xff0c;是Yahoo 人写的《提高网站速度的最佳实践》共有 14 条&#xff0c;是英文的&#xff0c;本来想翻译一下&#xff0c;google 了一下&#xff0c;已经有翻译版了。贴出来…

提高网站速度的最佳实践

今天偶尔在网上看到了这篇文章&#xff0c;http://developer.yahoo.com/performance/rules.html&#xff0c;是Yahoo 人写的《提高网站速度的最佳实践》共有 14 条&#xff0c;是英文的&#xff0c;本来想翻译一下&#xff0c;google 了一下&#xff0c;已经有翻译版了。贴出来…

大型网站架构演变和知识体系

网站在经过长时间的积累&#xff0c;架构也在慢慢的演变以适应网站的发展。 架构演变第一步&#xff1a;物理分离webserver和数据库 最开始&#xff0c;由于某些想法&#xff0c;于是在互联网上搭建了一个网站&#xff0c;这个时候甚至有可能主机都是租借的&#xff0c;但由于这…

网站返回503

网站需要临时维护&#xff0c;这是个经常性的问题&#xff0c;在这期间必须关闭网站一小段时间&#xff0c;而在这段维护的期间内&#xff0c;我们应该做些什么&#xff0c;我们应该向搜索引擎返回什么样的header信息&#xff1f;200&#xff1f;404&#xff1f;500&#xff1f…

Android应用实例之---使用Linkify + 正则式区分微博文本链接及跳转处理如同新浪微博Android版的应用上,当我们点击微博文本上的链接会自动跳转界面,或网站链接跳转网页浏览,或邮箱链接

http://www.cnblogs.com/ryan1012/archive/2011/07/12/2104087.html 如同新浪微博Android版的应用上&#xff0c;当我们点击微博文本上的链接会自动跳转界面&#xff0c;或网站链接跳转网页浏览&#xff0c;或邮箱链接跳转邮箱服务&#xff0c;或电话号码链接跳转拨号界面。And…

JavaScript中的mouseover与mouseenter,mouseout和mouseleave的区别

1、mouseover与mouseenter mouseover事件&#xff1a;不论鼠标指针穿过被选元素或其子元素&#xff0c;都会触发 mouseover 事件。 mouseenter事件&#xff1a;只有在鼠标指针穿过被选元素时&#xff0c;才会触发 mouseenter 事件。 简单写个例子&#xff1a; [html] view pl…

大型网站的灵魂——性能

大型网站的灵魂——性能 前言 在前一篇随笔《大型网站系统架构的演化》中&#xff0c;介绍了大型网站的演化过程&#xff0c;期间穿插了一些技术和手段&#xff0c;我们可以从中看出一个大型网站的轮廓&#xff0c;但想要掌握设计开发维护大型网站的技术&#xff0c;需要我们一…

为Symfony2和Redis正名,基于PHP的10亿请求/周网站打造

摘要&#xff1a;Octivi当下网站每周请求数已达10亿次&#xff0c;然而出人意料的是&#xff0c;他们仍然使用着Symfony2这个通常被认为低性能的PHP Framework。除此之外&#xff0c;他们更使用了Redis作为主要储存。 【编者按】如果你还在Symfony2和Redis使用中存在这样的错误…

自学改变一生,6个适合年轻人自学的网站,知乎超100万人推荐

在学校或者工作中&#xff0c;觉得自己的能力毫无提升&#xff0c;怎么办&#xff1f;在做好自己本职工作&#xff0c;不妨多去学习一些知识&#xff0c;让自己的技能更加强&#xff0c;收入更上一层&#xff0c;何乐不为&#xff1f; 第一个&#xff1a;慕课网 第二个&#x…

一些网站设计原型图

看到了一些非常棒的网站产品的原型图设计&#xff0c;分享给大家看看&#xff0c;任何一个伟大的互联网产品设计都是从这些看似简单&#xff0c;粗糙的线框图开始的。 有时候用纸和笔来进行快速的创意描绘会得到更迅捷的成果&#xff0c;你可以在一个简单的模式中速写你的结构设…

把HTTPS网站中的安全证书导入到java中的cacerts证书库

第一步&#xff1a;下载证书 第二步&#xff1a;导入证书 以管理员身份运行任务 C:\Windows\system32>keytool -importcert -alias COMODO_RSA_Extended_Validation_Secure_Server_CA -keystore "C:\Program Files\Java\jdk-11.0.8\lib\security\cacerts" -fil…

爱奇艺视频网站数据清洗整理和结论研究

1、数据清洗 - 去除空值import numpy as np import pandas as pd data pd.read_csv(C:/Users/HP/Desktop/爱奇艺视频数据.csv,engine python)def data_cleaning(df):for col in df.columns:if df[col].dtype object:df[col].fillna(缺失数据,inplace True) #fillna方法填充…

ASP.NET 2.0网站专案同时使C#与VB.NET之技巧

转自&#xff1a;http://blog.csdn.net/dotnetcool/archive/2006/09/07/1189291.aspx 在以往VS.NET 2002及VS.NET 2003的Visual Studio工具本身不支援多个组件档&#xff08;Assembly&#xff09;&#xff0c;也就是专案编译后只会产生一个.dll组件&#xff0c;而一个组件只允许…

从零打造视频播放网站(2)-后端接口设计篇

后端接口设计篇 环境:接口文档:说明:测试: 环境: centos7系统php7.0框架:thinkphp5.0服务器:nginx 接口文档: http://39.106.207.193:8000/doc 说明: 返回类型均为 JSON数据格式 测试: http://39.106.207.193:8000/play/group/2337?fromkkm3u8 [{"id": 1, &q…

从零打造视频播放网站(1)-数据采集篇

数据采集篇 1.数据库设计:2.环境:3.创建项目:4. settings.py5.爬虫编写:6.增量式爬虫:7.启动爬虫:8.总结: 1.数据库设计: source表(播放源): idnamedescparseshow自增id播放源名称播放源描述解析url展示名 video表: idtitledesctypeareathumbyeardirectorintroductionactors…

黑马就业班(02.JavaWeb+项目实战\16.JavaWeb综合项目实战手把手学习)旅游网站项目(发现案例有问题!已修正)+浏览器页面代码调试(视频45-16.00)

本文对应项目&#xff1a;目录&#xff1a;G:\idea_java_project 下的travel项目本文参考资料《综合案例笔记》笔记 1、准备工作 项目导入 将资料的空travel项目导入IDEA中。&#xff08;注意导入项目的方法&#xff0c;选择的是pom.xml文件&#xff0c;参考视频1-4.00&#…

缓存、动态页面静态化、网站优化

一、缓存 缓存(Cache)技术在软件开发过程中有着广泛的用途, 它对提升软件性能和改善客户体验有很大帮助. 所谓缓存, 是指将那些经常重复的操作结果暂时存放起来, 在以后的执行过程中, 只要使用前面的暂存结果即可. 缓存技术在日常生活中随处可见, 就拿排队买票来说吧: 买票时需…

vs2008开发wap网站(一)

http://www.cnblogs.com/3stones/archive/2009/01/05/1351969.html 首先新创建个项目&#xff0c;打开VS2008&#xff0c;新建个网站项目&#xff0c;我们添加新项时会发现以前在vs2003或vs2005中的“移动Web窗体”项没有了&#xff0c;下图为vs2003和2005中的。 vs2008中就没…