手把手教你使用Hexo和github搭建免费个人博客网站

news/2024/5/9 13:54:28/文章来源:https://blog.csdn.net/meng_nn/article/details/100273493

俗话说的好“吃水不忘挖井人”,当自己体验过Hexo搭建个人网站后,也来分享一下搭建过程遇到的乐趣以及遇到的坑!

准备工作(电脑配置工具)

在搭建Hexo博客之前,首先需要简单在你电脑安装一些工具以及依赖包(具体安装方法相信大家都会,就省略了)

首先要有一个github账号
其次安装node.js,npm依赖
然后安装git工具(当然电脑自身的cmd工具也是可以用的)

创建github网站(username.github.io的github仓库)

新建一个名为“你的用户名.github.io”的仓库,比如说,如果你的github用户名是mengnn,那么你就新建"mengnn.github.io"的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 mengnn.github.io了,对的,就是这么方便。

当然,一个github账户下只能创建一个以此命名的仓库,用来直接访问。

点击New repository
输入Repository name,必需为username.github.io格式。username替换为用户名
点击按钮Create repository
进入仓库username.github.io,点击setting,找到GitHub Pages模块
点击choose a theme选择一个页面主题
访问https://username.github.io就可以访问博客网站了

为github设置SSH Keys

之所以配置SSH Keys,是因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。

首先检查机器上是否已经存在id_rsa.pub文件

cd ~/. ssh #检查本机已存在的ssh密钥

如果不存在那就通过命令生成秘钥

ssh-keygen -t rsa -C "邮箱地址"

一路回车就好(记得应该是连续3次回车),最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容。

打开你的github页面,点击setting进入—> SSH and GPG keys —> New SSH key,然后把你复制的内容放到Key中,其中Title中的内容可以随便填一个就ok了,如下图:

添加成功保存就OK了。

测试SSH Key

输入下面命令,测试SSH Key是否安装成功

ssh -T git@github.com # 不用改邮箱地址

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会类似于:Hi mengnn! You've successfully authenticated, but GitHub does not provide shell access.的字符,说明你安装成功了。

安装Hexo

以上准备工作完成后,就要放大招了,对,接下来就是重头戏-本地部署Hexo。

具体的Hexo介绍,你可以在网上查询,有很多,当然你也可以去Hexo官网详细了解,这里就不做过多介绍,不过要特别强调的是,上面的命令行以及下面的npm操作都是通过Git Bash Here操作的,所以前面写到要提前安装git工具。

安装前特别准备

特别注意的是:国内npm安装依赖实在是太慢太慢太慢了,尤其一些依赖小则一百兆左右,大则几百甚至上G兆,所以强烈推荐使用淘宝镜像cnpm安装依赖,淘宝镜像安装方法如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org
//查看cnpm是否安装成功
cnpm -v
//如果出现版本号的信息,说明你安装成功

然后所有的npm操作你都可以换成cnpm操作了,当然下面为了大家不混淆,还是用的npm操作,你操作的时候全都可以替换成cnpm。

安装进行

通过以下命令行全局安装Hexo

$ npm install -g hexo

初始化仓库

在你机器的合适位置创建项目文件夹(这个文件夹就是以后你写博客的存档文件夹,所有的内容都会在这个里面),比如我创建的是Blog,然后使用git找到Blog根目录下

cd Blog

在项目根目录下初始化你的Hexo。

在初始化之前,尤其抢到一点,你进行的hexo init操作会比较慢,耐心等待,特别特别抢到的事,你的node版本尽量要高于v.6.3.0,不然很大可能你的初始化操作进行一天也不会完成,所以,初始化之前尽可能的检查一下node版本,升级 一下

cd /f/Blog
hexo init

初始化完成后,在你根目录下面会生成一些文件

然后你就可以进行hexo操作生成文章以及本地运行

hexo g # 生成对应的html
hexo s # 启动服务

上面命令执行完成后,你就可以在根目录的public文件夹下看到对应的生成页面(这个文件夹的内容也会是你推送到github上的内容)

hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容。

上传到github

以上内容都配置好了,你就可以上传到github上了(首先,ssh key肯定要配置好,其次,配置_config.yml中有关deploy的部分)

在之前,我们已经配置好ssh了,所以接下来我们要配置初始化后生成的_config.yml文件,配置如下:

deploy:type: gitrepository: git@github.com:mengnn/mengnn.github.io.gitbranch: master

然后你就可以上传了

hexo d #上传本地代码到github

上传成功后你就可以访问你的github域名进行访问了,比如例子中的mengnn.github.io

更改主题

第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑。不信你可以自己打开看看。不要急,我们可以更改自己喜欢的主题。当然你可以先在官网中查看自己喜欢的主题,然后下载下来就OK了。我选择的是一个yilia主题

下载这个主题(当然,下载主题可以有很多方法,最后只要你能下载的主题文件copy到根目录下的theme文件夹中即可):

cd F:\Blog\themes  #进入到根目录下的themes文件夹(这个就是主题文件夹)
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia  #下载yilia主题到文件夹中

下载完成后,你会看到下面的内容(第一个文件就是你刚刚下载的yilia主题文件,第二个是系统默认主题文件)

修改根目录下的_config.yml中的theme: landscape改为theme: hexo-theme-yilia,然后重新执行hexo g来重新生成,然后hexo d提交就OK啦。

如果出现一些莫名其妙的问题,可以先执行hexo clean来清理一下public的内容,然后再来重新生成和发布。

对的,这样你的新主题就更改成功,然后这个主题下还有很多详细高端配置,就暂时不在这里详说了,放一个我自己配置好的界面:

写博客

所有的都配置好,怎么去写博客呢?

定位到我们的项目文件F:\Blog\source_posts中,你所有的初始博客都是保存在这里的,包括你所有的md文件

cd F:\Blog\source\_posts

定位之后你就可以在定位的文件夹里生成md文件了

hexo new 'my-first-blog'

当然,你也可以自己手动在_posts文件夹中创建.md文件,进行编写


---
title: postName #文章页面上的显示名称,一般是中文
date: 2019-08-14 22:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1, tag2, tag3] #文章标签,可空,多标签请用格式,注意逗号后面有个空格
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---

另外在这里我推荐一个个人认为比较好用的写博客工具:Typora,目前为止我发现的最好用的md文件编辑器,可以上传图片,代码块,文字编辑,主题更好等等,轻量级而且好用,Typora官网,你可以下载你需要的版本。

以上就是简单的Hexo+github博客的部署以及上传,相信对于入门的你来说已经足够了,后续会推出进阶版的文章,请持续关注。

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

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

相关文章

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

之前也有一些介绍大型网站架构演变的文章,例如LiveJournal的、ebay的,都是非常值得参考的,不过感觉他们讲的更多的是每次演变的结果,而没有很详细的讲为什么需要做这样的演变,再加上近来感觉有不少同学都很难明白为什么…

【Python 爬虫 CASE】使用Selenium+BeautifulSoup获取新闻网站文章列表

一、需求 获取腾讯新闻网站(https://news.qq.com/)首页的新闻标题和列表 F12打开开发者工具,查看源代码 二、实现 Step1:获取网页源代码 如果使用requests库获取源代码 import requests res requests.get(http://news.qq.com/)但是这种方式获取的…

【Python 爬虫 CASE】使用Requests+BeautifulSoup获取新闻网站文章内容并整理成表

一、需求 获取新浪新闻网站(http://news.sina.com.cn/china/)首页的新闻内容 F12打开开发者工具,查看源代码 打开新闻链接,获取该新闻文章的“内容”、“标题”、“来源” F12打开开发者工具,查看源代码 二、实现 Step1:构建…

Magento开发教程 - 后台设置多个网站,商店和商店视图

1: 创建产品根目录 登录到Magento 2后台.点击 Products > Categories.点击 Add Root Category.在 Category Name 输入分类名称. 确保 Enable Category 设置 Yes. 如下图: 点击 Save. 2: 创建 websites(网站) 点击 Stores > 设置 >…

visual studio 2010教程-创建网站项目

1.打开visual studio 2010 选择新建 - 网站 2.进行对应的设置 3.创建完毕之后,在解决方案资源管理器中出现对应的项目 4.在项目名称上 右键 - 添加新项 5.选择web窗体,并命名新建的页面为index.aspx 6.创建完毕之后的工程 7.首页的源代码如下 8.接下来…

项目总结——Java web之实现当当网网站

Java web之实现当当网网站 运行环境:JDK1.8tomcat8.4MySQL5servlet技术 源码结构 CategoryDAO.java package com.tarena.dao;import java.sql.SQLException; import java.util.List;import com.tarena.entity.Category;public interface CategoryDAO {public Lis…

如何使用IIS发布网站?

如何使用IIS发布网站? 1.搜索输入 IIS,找到IIS(Internet Information Services) 2.添加网站 3.填写相关内容属性 4.浏览默认文档 5.浏览发布界面 有任何疑问和和源码需求敬请关注公众号【蜗牛资源社】 欢迎交流学习&#x…

C++网站开发MVC框架TreeFrog Framework教程——2.简单示例

下面以一个博客文章管理网站的开发实例作为这个框架的使用入门教程。 1.安装TreeFrog Framework 下面以Ubuntu为例说明: 1.1.安装框架的依赖库: $ sudo apt-get install -y qt5-default qt5-qmake libqt5sql5-mysql libqt5sql5-psql libqt5sql5-odb…

C++网站开发MVC框架TreeFrog Framework教程——8.Otama模板

Otama模板系统的最大特点在于表现层的纯粹性&#xff0c;使用原生的HTML标签取代形如<%...%>这样的嵌入脚本代码。 使用之前&#xff0c;记得把配置文件&#xff08;development.ini&#xff09;中的模板系统设置为Otama&#xff1a; TemplateSystemOtamaOtama模板文件…

从零开始开发一个大型网站

从零开始开发一个大型网站 更新&#xff1a;前端代码已全部由TypeScript进行重写 这是本人第一个从零开始开发一个大型网站&#xff08;前后端部署代码&#xff09;&#xff0c;是一个内容分享社区&#xff0c;详细信息见github。目前还是开发中后期&#xff0c;随后还要进行…

使用MVC框架开发网站(一)

概述 本章您将学会&#xff1a; 1.MVC的概念及使用 2.MVC与ASP.NET的区别 3.路由和URL导向 4.控制器和视图 5.模型与模型状态 6.过滤器 7……. 第1章_MVC与ASP.NET的区别 1.1概述 MVC是一种流行的Web应用架构技术&#xff0c;他把Web应用划分成Model、Controller和V…

利用beego开发网站(一)

在这里&#xff0c;我将分享我这段时间学到的关于怎样搭建一个简单的beego项目&#xff0c;分享的东西仅仅是入门级别。 一&#xff0c;安装golang的开发工具和语言的编译工具&#xff08;如果本步骤不会的话&#xff0c;请去golang中国社区查阅资料进行开发搭建&#xff09; 我…

使用ThinkPHP框架快速开发网站(多图)

使用ThinkPHP框架快速搭建网站 这一周一直忙于做实验室的网站&#xff0c;基本功能算是完成了。比较有收获的是大概了解了ThinkPHP框架。写一些东西留作纪念吧。如果对于同样是Web方面新手的你有一丝丝帮助&#xff0c;那就更好了挖。 以前用PHP做过一个很蹩脚的网站&#xff0…

node爬虫_爬取斗图啦网站上的表情包

最近在学习node.js,做点不是人的事情&#xff1a;爬取网站上的表情包 实现步骤&#xff1a; 1、分析网站的结构&#xff1a; 斗图啦这个网站是服务器渲染的&#xff0c;直接打开网站就可以获取到完整的html信息。 我们可以看到下面两张图就是我们需要获取的信息 2、使用的插…

良心安利卧室su模型素材网站

前方干货满满&#xff0c;建议先收藏再看哦&#xff01;为大家整理卧室su模型素材&#xff0c;总有满足你需求的一款&#xff0c;除此之外&#xff0c;免费&#xff0c;资源质量好&#xff0c;一键打包下载&#xff0c;你还不心动吗&#xff1f; 因为小编的工作原因&#xff0…

必备 免费人物虚幻模型素材网站

前方干货满满&#xff0c;建议先收藏再看哦&#xff01;为大家整理人物虚幻模型素材&#xff0c;总有满足你需求的一款&#xff0c;除此之外&#xff0c;免费&#xff0c;资源质量好&#xff0c;一键打包下载&#xff0c;你还不心动吗&#xff1f; 本人曾经也是废大把时间寻找…

超全机械设备 机器3dm犀牛资源素材网站整理

想必大家都在为找机械设备 机器3dm犀牛资源而头疼吧&#xff0c;今天小编都为大家整理好咯&#xff0c;上资源的机械设备 机器3dm犀牛资源&#xff0c;大家喜欢的可以先行收藏哈&#xff0c;之后会持续更新哒~ 接下来就给大家介绍一下我珍藏已久的网站&#xff1a;爱给网&…

良心安利办公室样机模板素材网站

因为工作的原因&#xff0c;我会经常使用到素材网站&#xff0c;各个平台的模式不太一样&#xff0c;内容也各有特点。刚开始接触素材网站都是一头雾水&#xff0c;走了很多弯路&#xff0c;一些很简单的操作都花去很长的操作时间.....今天给大家安利办公室样机模板素材网站&am…

超全公园sketchup模型素材网站整理

想必大家都在为找公园sketchup模型而头疼吧&#xff0c;今天小编都为大家整理好咯&#xff0c;超多的公园sketchup模型资源&#xff0c;大家喜欢的可以先行收藏哈&#xff0c;之后会持续更新哒~ 接下来就给大家介绍一下我珍藏已久的网站&#xff1a; 爱给网&#xff0c;我的工…

宝藏又小众的飞机cc0高清摄影图片素材网站分享

天天各大网站找飞机cc0高清摄影图片素材&#xff1f;最后空手而归&#xff1f;今天为大家推荐飞机cc0高清摄影图片素材网站&#xff0c;质量上乘适合资源慌缺的你&#xff0c;话不多说准备开始收藏吧&#xff01; 因为小编的工作原因&#xff0c;经常会使用到飞机cc0高清摄影图…