使用hexo+github免费搭建个人博客网站超详细教程

news/2024/5/20 1:09:30/文章来源:https://blog.csdn.net/wapchief/article/details/54602515

很多人都想搭建自己的博客,但是奈何技术有限,服务器部署,HTML,域名解析,等等,这一大堆东西可真有的折腾。

但是如果有这样一个机会,不需要太复杂的操作,不要服务器,不要域名,不用写html,你愿意去尝试吗?

可以先看一下我自己的https://wapchief.github.io/
背景图有点大,3M多,可能加载比较慢,但是一进去能看到默认的有个背景,然后是默认背景慢慢被覆盖的情况。
当时也是费了半天功夫才搭建好,在这篇文章中会详细介绍整个流程,尽量避免入坑吧,但要是真是你自己给自己挖坑那就没办法了。

搭建的时候也是看着别人的教程一点点跟进,但是都有缺陷。
比如分支的创建,和私人域名的解析,有这方面的教程但是都不是太完善,有些只是教你搭建但是后期没有考虑换电脑,换环境的情况。包括后期维护等等。

这是我github上的源码,为了便于理解。本文相关部分也会结合源码进行讲解。有不清楚的地方欢迎提问,尽我能力给大家解决(毕竟我不是专业的)。
https://github.com/wapchief/wapchief.github.io

优点
1、不需要服务器,github免费提供的托管服务
2、不需要域名,github同样提供了一个.io的域名
3、不用自己写xml、hexo提供了很多开源的博客模板。
4、便于维护更新,换风格直接换模板就行。

###进入正题###

  • 安装相关工具

1、安装Node.js
https://nodejs.org/dist/v4.2.3/node-v4.2.3-x86.msi
https://nodejs.org/dist/v4.2.3/node-v4.2.3-x64.msi
选择需要的版本下载,分别是32位和64位。下载后安装一直默认下一步就行。
2、安装Git
Git-2.11.0.3-32-bit.exe
Git-2.11.0.3-64-bit.exe
打开cmd命令行(win+r 输入cmd回车)分别执行

node -v
npm -v
git --version

会得到相对应的版本信息(如图)
wapchief
如果都可以成功运行出现版本信息证明安装成功。
这里写过一篇介绍git的文章,如果安装遇到问题可以去查看:
《必须要会的Git基本使用及常用命令操作》
3、安装Hexo
必须按照步骤来,因为hexo需要使用node.js的npm命令。
打开cmd命令行(win+r 输入cmd回车)分别执行

npm install hexo-cli -g

等待自动安装完成后。输入

hexo -v

检查是否安装成功
到这一步如果所有都安装成功,并测试无问题,那么本地配置已经搞定,下面开始在github上建项目了。

  • #####在github上创建并设置远程库
    注册登录略过,不会的请自行百度。
    **登录后点击“+”号,选择New repository,下一步
    在Repository name下面填写你要创建的地址,这个地址是就是你的域名,以github.io结尾。**例如填写wapchief.github.io以后就在地址栏直接输入wapchief.github.io就可以访问网站
    按照提示一步步完成创建。
    创建之后,点击setting设置远程库:
    找到GitHub Pages点击Automatic page generator
    等待github pages创建完成,然后输入你创建的地址测试github pager是否创建成功。此时页面是空的没有任何东西。
    wapchief
    下面要做的就是使用hexo模板将源码放到github。

  • #####初始化Hexo
    创建一个文件夹用于存放hexo。然后右键该文件夹使用

git bash here

命令就可以直接定位到当前目录。
wapchief
然后使用

 npm install hexo --save

初始化hexo基础配置文件。初始化时间比较长,不用急,等完成后输入

hexo init

初始化hexo。这个命令和git 仓库命令相似。意思一样都是初始化。
接着输入

npm install

配置node。然后输入

hexo g

加载hexo基础html、css、js等文件。
在这完成后等于已经在本地创建了一个网页,想查看的话,输入

hexo s

然后相当于开启了一个本地的服务器,会提示你拷贝url到浏览器。
(如图)
wapchief在浏览器输入 http://localhost:4000/
会看到这样的页面,证明本地hexo默认模板配置成功,
wapchief
到这一步如果将hexo放到github page,那么使用github.io访问的将是一个默认的页面。下面我们要把他diy成自己的博客,包括导入模板主题等。

  • 安装主题

关于主题大多都是以压缩包形式,可以去github上搜hexo theme,会出来很多,里面都有介绍。
hexo-theme主题比如我们要用第一个。
可以通过两种方法,这里我直接使用git命令完成,具体请参考next官方文档:http://theme-next.iissnan.com/getting-started.html
继续在我们的本地hexo目录输入

git clone https://github.com/iissnan/hexo-theme-next themes/next

等待下载完成。如果出现失败的提示,有可能是网络环境不好。重试即可。
ok,下载完主题后我们打开文件夹,找到themes文件夹,发现里面多了个
next
这个就是我们下载下来下来的主题文件。
接下来我们回到hexo根目录下用记事本打开_config.yml文件。
把landscape修改成next就行了。
我们再运行

hexo s

打开浏览器地址栏输http://localhost:4000/
现在是我们修改主题后的页面。

  • 修改内容

内容较多建议参考官方文档
https://hexo.io/zh-cn/docs/configuration.html
修改完之后,可以重新执行hexo s在浏览器查看效果。并确认无误,包括以后需要添加文章,或者更新主题等,都建议先在本地查看无误再远程部署。
根_config.yml文件中

# Site
title: 网站标题
subtitle: 副标题
description: 个人签名
author: 姓名
language: zh-Hans
timezone:

这里有几个坑需要注意一下:

1、所有的配置“:”符号后面都要带空格,否则执行本地测试直接失败。
2、language是设置语言。zh-Hans是中文。
3、如果设置zh-Hans后仍出现乱码问题。需要更改文件的字符编码集为UTF-8,方法很多具体,就不详细介绍了。

注意同时要在,根_config.yml中配置自己的远程仓库地址

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

这一步很关键,不要漏了。

  • 提交项目,部署

继续在本目录命令行
安装部署工具(方便以后更新)
npm install hexo-deployer-git -save
1、初始化本地仓库:
git init
2、连接远程仓库:
如果是第一次使用git,在使用git的时候会提示输入用户名和密码,用户名是自己的注册邮箱。
git remote add origin https://github.com/wapchief/wapchief.github.io.git
3、发布hexo到github page
hexo clean && hexo g && hexo d
4、添加文件到本地仓库
git add
5、提交声明
git commit -m '内容'
6、推送到远程仓库(github)
这里建议创建一个新的分支hexo,用于管理hexo文件。提交的的时候只提交hexo网站html、css、等源文件。而默认的master用来部署更新项目,具体可以看我的github地址分支情况https://github.com/wapchief/wapchief.github.io
创建并切换到新建分支:
git checkout -b hexo
将分支推送到远程仓库:
git push origin hexo
这时打开网站就能看到效果了。

记得提交以后去github上把hexo分支设置默认,以后写文章等都要部署。
文章在hexo目录下的\source_posts文件夹中,是md格式,也就是Markdown格式。
以后可以用以下命令部署。也就是第三步

//等于一次性执行了,清空、刷新、部署三个命令
hexo clean && hexo g && hexo d

如果部署时不clean,可能之前修改的文章还存在。包括一些配置等,有时候部署完成后并没有改变,其实是缓存未清除。

  • 进阶-绑定域名

域名可以自行去阿里云,景安等网站购买。一般都有系统提示步骤。
拿到域名之后,进行解析,推荐使用dnspod免费解析。
具体使用方法:
1、注册登录dnspod之后,添加域名,然后解析,添加两条记录


2、登录你注册域名网站的管理后台,修改DNS解析地址为

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

3、登录github,找到项目,设置setting,找到GitHub Pages
wapchief

4、在master分支下的CNAME.MD文件写入注册的域名
wapchief

再次访问差不多就好了,如果延迟的话,可能解析立马不会生效。需要等会儿才能看到。


自己创建博客已经有些日子了,现在朋友想搭建博客,正好自己接触过,也整理一下,以后方便查看。所有的流程都在这里。
对于有git、nodeJs基础的人来说搭建起来可能也就是十几分钟的事,但是对于没接触过的就要费很大工夫。如果遇到问题欢迎留言。

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

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

相关文章

selenium在爬虫领域的初涉(自动打开网站爬取信息)

selenium简介 Selenium 是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。这个工具的主要功能包括:测试与浏览器的兼容性——测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。测试系统功能…

java开源网站

Java开源大全(www.open-open.com)收录最全,最新的Java开源软件,发布最新IT资讯,提供开发文档、技术经验在线分享平台。www.open-open.com/ Java开源软件 - 开源软件库 - 开源中国社区 开源中国社区(OSChina)共收录了 5810 款Java 软件... 共有5810款Java 开源软件,第1页Android…

Spring cloud实战 从零开始一个简单搜索网站_freemark 以及configserver的应用(二)

先来说下我的网站架构吧 前面大家也看到了 既然叫博客搜 自然是搜索 博客的 我把每个网站会抽象成一个Client (为了更好的学习cloud) 上面只是展示了主要部分 像Hystrix Ribbon Zuul等等就不画上去了 下面我们再建一个Client 选Eureka Server就可以了 修改…

如何使用postman访问网站

1、输入Request URL2、选择Request Method3、输入需要的Request Headers注意:一般token会在Headers中 转载于:https://www.cnblogs.com/jishugaochao/p/10192076.html

互联网网站架构升级----分布式环境的构建

随着网络流量爆发式增长,几百人维护一个项目将是一个可怕的噩梦,业务拆分势在必行。拆分的业务形成一个个独立的系统,系统间的协调又变成了一个棘手的问题,所以维护这些系统间协调关系的分布式环境组件将发挥至关重要的作用。 由于…

scrapy-redis案例(一)爬取中国红娘相亲网站

前言:本案例将分为三篇。 第一篇,使用scrapy框架来实现爬取中国红娘相亲网站。 第二篇,使用scrapy-redis 简单的方式爬取中国红娘相亲网站。(使用redis存储数据,请求具有持续性,但不具备分布式)…

scrapy-redis案例(二)爬取中国红娘相亲网站

前言:本案例将分为三篇。 第一篇,使用scrapy框架来实现爬取中国红娘相亲网站。 第二篇,使用scrapy-redis 简单的方式爬取中国红娘相亲网站。(使用redis存储数据,请求具有持续性,但不具备分布式)…

scrapy-redis案例(三)爬取中国红娘相亲网站

前言:本案例将分为三篇。 第一篇,使用scrapy框架来实现爬取中国红娘相亲网站。 第二篇,使用scrapy-redis 简单的方式爬取中国红娘相亲网站。(使用redis存储数据,请求具有持续性,但不具备分布式)…

python-scrapy模拟登陆网站--登陆青果教务管理系统(一)

前言: 第一篇,分析青果教务管理系统登陆模块,理清思路 第二篇,使用常规的python常用库 requests来实现模拟登陆 第三篇,使用scrapy来实现模拟登陆 目的在于了解模拟登陆网站的要点和方法,了解http请求的一些…

python-scrapy模拟登陆网站--登陆青果教务管理系统(二)

前言: 第一篇,分析青果教务管理系统登陆模块,理清思路 第二篇,使用常规的python常用库 requests来实现模拟登陆 第三篇,使用scrapy来实现模拟登陆 目的在于了解模拟登陆网站的要点和方法,了解http请求的一些…

python-scrapy模拟登陆网站--登陆青果教务管理系统(三)

前言: 第一篇,分析青果教务管理系统登陆模块,理清思路 第二篇,使用常规的python常用库 requests来实现模拟登陆 第三篇,使用scrapy来实现模拟登陆 目的在于了解模拟登陆网站的要点和方法,了解http请求的一些…

【问底】徐汉彬:大规模网站架构的缓存机制和几何分形学

【问底】徐汉彬:大规模网站架构的缓存机制和几何分形学 发表于18小时前| 2273次阅读| 来源CSDN| 14 条评论| 作者徐汉彬问底CDN缓存徐汉彬allowtransparency"true" frameborder"0" scrolling"no" src"http://hits.sinajs.cn/A1/…

在IIS上部署PHP网站

1、启动iis服务器,打开IIS服务器 打开IIS服务器,点击网站,右击“添加网站” 2、创建网站 点击“添加网站”后,进入页面填写网站相关内容,如:网站名称、物理路径(网站所在文件夹),点击“确定”创建成功 3、…

借助花生壳把内网网站映射给外网。(内网穿透/路由器端口映射)、外网控制内网...

其实这个东西几年前我就弄过,但是当时心智不成熟,没学会怎么玩耍,今天玩了一把也没啥的, 1.搭建网站 假设内网电脑是192.168.100.9 访问Http://192.168.100.9能打开网站,这样就ok了,不能用的自己百度. 2. 端口映射 貌似…

多个端口指定多个目录。花生壳多个域名多个网站

配置php网站 打开httpd.conf Listen 88 Listen 8888 打开vhost.conf Listen 80NameVirtualHost *:80 <VirtualHost *:88> ServerName localhost DocumentRoot "D:/phpStudy/WWW"<Directory "D:/phpStudy/WWW">Options -Indexes FollowSymLinks…

大型网站数据库优化及浅析大型网站的架构(转)

大型网站数据库优化 千万人同时访问的网站&#xff0c;一般是有很多个数据库同时工作&#xff0c;说明白一点就是数据库集群和并发控制&#xff0c;这样的网站实时性也是相对的。这些网站都有一些共同的特点&#xff1a;数据量大&#xff0c;在线人数多&#xff0c;并发请求多…

解决github网站 git 操作太慢问题

上网查找改善方法解决了问题&#xff1a; 思路&#xff1a;git clone 特别慢是因为github.global.ssl.fastly.Net域名被限制了。只要找到这个域名对应的ip地址&#xff0c;然后在hosts文件中加上ip–>域名的映射&#xff0c;刷新DNS缓存就可以了 1.获取 global.ssl.fastly地…

漏洞库网站

关于漏洞的国内外网站

IIS网站部署——基本流程

近期在一个项目中用到了IIS服务器,在学习使用的过程中遇到了很多问题&#xff0c;下面先对IIS网站部署的基本流程做个简单介绍。 以Windows 7 64位系统为例 一.IIS服务开启 1.打开Windows功能 依次打开控制面板 — 程序&#xff0c;再点击“打开或关闭Windows功能”&#xf…

Springboot 系列(十四)迅速启用 HTTPS 加密你的网站

点赞再看&#xff0c;动力无限。Hello world : ) 微信搜「 程序猿阿朗 」。 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录&#xff0c;有很多知识点和系列文章。 1. 获取 HTTPS 证书 正常情况下 HTTPS 证书需要从证书授权中心获得&#xff0c;这样获得的证书才…