hexo博客网站搭建

2022-04-22

2022-04-29

注册域名

注册域名教程

Namesilo DNS 域名解析教程和常见问题解决方法汇总

Github Pages 静态网页建站

github配置

新建一个Repositories，Repository name填你的GitHub用户名.github.io
github仓库的settings，把repository visibility设置成public，然后进入Pages，Source中的Branch选择master，Custom domain设置成自己的博客地址。

Git配置

右键打开Git Bash

设置用户名和邮箱

1 2	git config --global user.name “yourname” git config --global user.email“your@email.com”

生成ssh密钥文件：
1
ssh-keygen -t rsa -C '邮箱地址'
- 默认不设置密码，保存默认位置，直接回车就行
- 查看ssh公钥的两种方法：
  - 输入：cat ~/.ssh/id_rsa.pub
  - 打开用户目录下的.ssh文件夹，打开里面的id_rsa.pub文件
将公钥添加到github
- 点击右上角带黄色的头像–>settings–>（personal settings中的）SSH and GPG keys–>new SSH key–>title自己取名，key中粘贴publickey–>Add SSH key
测试是否是连接至github，命令行输入：ssh -t git@github.com

遇到的问题

运行‘hexo d’提示remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.意思是自从21年8月13后不再支持用户名密码的方式验证了，需要创建个人访问令牌(personal access token)。
- 创建令牌：点击Settings→点击左侧的Developer settings→点击Personal access tokens→点击Generate new token，选择scope全勾上即可。

Hexo博客

安装Node.js

下载并安装NodeJS

安装hexo

在选定的文件夹内右键打开Git Bash，输入：
1
npm install hexo-cli -g

遇到的问题

运行hexo时报错“The “mode” argument must be integer”，原因是hexo版本和Node版本不匹配，Node版本过高。解决方案是将hexo更新到新版本，或者将Node退回到旧版本。
hexo升级时报错use_date_for_updated，解决方案是找到hexo的配置文件：_config.yml 更改其中的：use_date_for_updated 为 updated_option

生成博客

输入：
1
hexo init blog
- 这里的blog是用户自己取的一个站点目录名字。
初始化完成后进入站点目录并安装依赖：
1
npm install
到这一步，本地博客就搭建好了，测试一下：
- 启动本地服务器
  - hexo s
- 默认情况下，访问网址是：http://localhost:4000/

部署网站

在博客目录下，找到站点配置文件_config.yml，打开，Crtl+F查找 url 字段，修改为：
- url: https://你的GitHub用户名.github.io/

然后找到 deploy 字段，修改为：

deploy:
type: git
repo: https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git
branch: master

安装Git部署插件，输入命令:
1
npm install hexo-deployer-git --save
最后，输入命令：
1
2
hexo clean
hexo g -d
遇到的问题
运行’hexo -d’时提示‘fatal: unable to access ‘https://github.com/用户名/用户名.github.io.git/': OpenSSL SSL_read: C’错误。解决方法：把URL 模式从HTTPS改为SSH即可。详情见Changing a remote’s URL

博客优化

更换主题

下载主题，以hueman主题为例

1	git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman

在根目录下的_config.yml文件中修改theme，默认是landscape，就是你第一次打开的主题。修改为：theme: hueman
把主题目录下的config.yml.example名字改成config.yml
hueman主题文档

遇到的问题

运行hexo d报错 Failed to connect to github.com port 443 after 21101 ms，是因为hosts中没有添加github的ip地址。

更改logo

位置hueman\source\css\images，把logo-header.png更换为自己的logo。

logo的配置在config文件：

customize:
    logo:
        width: 165
        height: 60
        url: images/logo-header.png

宽和高的单位都是像素。

更改网站缩略图

制作一张32*32的ico缩略图，推荐比特虫
将制作好的图片放入之前的图片地址themes\temp\source\css\images
修改congfig:
1
favicon: css/images/favicon.ico

更换背景

目录hueman\source\css_partial\header.styl
1
2
去掉：background: color-header-background
增加：background-image: url("地址")
记得把footer里的背景也给改了，对称美！

config

menu:
    Home: /
    Categories:
    About: /about/index.html

补全about页面
我们发现在配置文件hueman/_config.yml中其指向的页面是 /about/index.html，那就用hexo生成新页面：
1
hexo new page about
修改生成的about/index.md即可
添加社交链接
config，social_links

DNS解析

想要博客访问速度更快，更安全，可以了解DNS解析服务
- 域名解析教程：Cloudflare解析与DNSPod解析

文章头设置

首先为了新建文章方便，建议将/scaffolds/post.md修改为如下代码：

---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
toc: true
mathjax: true
summary:
tags:
categories:
---

撰写博文

插入图片

首先打开站点配置文件_config.yml，找到 post_asset_folder 字段，并将其值更改为 true ，这样新建文章的同时Hexo会自动在同目录下新建一个以文章名命名的空文件夹以方便存放该文章要用到的资源。

安装一个能上传本地图片的插件：

1	npm install https://github.com/CodeFalling/hexo-asset-image --save

使用图片
假设在

+—HelloWorld

| +– 1.jpg

| +– 2.jpg

| +– 3.jpg

+—HelloWorld.md

这样的目录结构（目录名和文章名一致）中，在文章源代码里只要使用形如![](HelloWorld/1.jpg) 这样的语句就可以插入图片了~

搭建github图床

或者也可以使用github搭建图床的方式引用图片：

github新建一个仓库
使用PicGo将图片上传到仓库
- PicGo安装好后，在github新建一个token，配置到PicGo的图床设置中
- 配置CDN加速：在PicGo图床设置中添加自定义域名即可

参考:

一小时搭建完自己的个人网站

超详细Hexo+Github博客搭建小白教程

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

教你半小时搭建Hexo-hueman主题博客

未分类

hexo博客网站搭建

注册域名

github配置

Git配置

遇到的问题

Hexo博客

安装Node.js

安装hexo

生成博客

部署网站

遇到的问题

博客优化

更换主题

更改logo

更改网站缩略图

更换背景

添加menu

添加社交链接

DNS解析

文章头设置

撰写博文

插入图片

搭建github图床

参考:

相关问题：