github 下的代码乱码_Windows下使用Hexo搭建博客

最新推荐文章于 2022-12-15 22:11:30 发布

王Evey

最新推荐文章于 2022-12-15 22:11:30 发布

阅读量297

点赞数

文章标签： github 下的代码乱码

本文链接：https://blog.csdn.net/weixin_35664081/article/details/112100642

版权

文章本来是放自己个人网站上的，但这么基础的东西放上面确实占用空间，就转到知乎来。

原文：

本文参考GitHub+Hexo 搭建个人网站详细教程，非常感谢吴润提供的详细的教程，对我这样的前端小白（前端也是小白）来说帮助太大了。

环境概述

Hexo

Hexo是基于Node.js的静态博客框架，可以方便生成静态网页托管在GitHub上。Hexo也是发布在GitHub上的开源项目，可见hexojs/hexo，佩服作者，真滴。听说作者是台湾人，所以不用担心对中文的支持问题。稍微岔开说，注意中文使用问题的地方暂时有两处：config.yml文件中的UTF8编码和命令窗里的中文乱码。

搭建网站

在GitHub中创建个人仓库

GitHub中New repository，仓库名格式为：xxx.github.io。这里的xxx一定重点关注咯，我做了实验之后发现的点，下面解释：

现在已知我GitHub用户名为：JinhangZhu或者说jinhangzhu。

当xxx为jinhang时

即不同于GitHub用户名的新用户名。这时生成的网站域名为：https://jinhangzhu.github.io/jinhang.github.io/，直接访问xxx.github.io是404的。

当xxx为jinhangzhu时

即使用GitHub用户名为站点用户名。网站域名这会儿才是：https://jinhangzhu.github.io/。
具体网站地址是多少，要选择repository，settings，GitHub Pages查看。

然后得在repository，settings中选择source，一般选择Master branch就可以了，用其他branch看个人习惯，我现在也没这习惯，没办法GitHub没用熟。theme先随便选一个就可以，后面会用Hexo修改。

配置Hexo所需环境

安装配置Git

Windows 10不自带Git，所以要到官网下载：Git - Downloads，安装好后在命令行里输入git测试是否安装成功。在桌面或者任何文件夹鼠标右击选择Git Bash Here，或者在菜单里打开Git Bash，设置以下信息：

git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"
# 比如我设置
git config --global user.name "JinhangZhu"
git config --global user.email "zhujinhangmr@163.com"

接下来生成ssh密钥文件：

ssh-keygen -t rsa -C "GitHub注册邮箱"

接下来三次回车，在C:Users你的名字.ssh文件夹里打开id_rsa.pub，复制全部内容。

打开GitHub的SSH and GPG Keys，添加new SSH Key，标题任填，比如：SSH_KEY_WIN，内容粘贴刚刚复制的，点击添加。

然后需要在Git Bash里检测GitHub SSH是否设置成功，输入：

ssh git@github.com

如果说显示以下，那就说明成功了。

Hi JinhangZhu! You've successfully authenticated...

下面引用吴润文章语句来说明设置SSH Key的原因：

这里之所以设置GitHub密钥原因是，通过非对称加密的公钥与私钥来完成加密，公钥放置在GitHub上，私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了ssh，当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。这样可以保证每次的推送都是正确合法的。

安装Node.js

前往官网：Download | Node.js下载安装，按照默认操作就可以，在命令行中输入：

node -v
# 检测Node.js是否安装成功
npm -v
# 检测npm是否安装成功

安装Hexo

在电脑常用文件夹中新建文件夹，比如起名Blog，之后的Hexo框架和所有网站文件都保存在这里。在Blog文件夹里打开命令行，或者用命令行进入这个文件夹，依次输入：

npm install -g hexo-cli
# npm命令安装Hexo
hexo init blog
# 初始化博客，这里会创建一个文件夹blog，在Blog文件夹下

这里实际上网站完成了本地搭建，如果直接输入：

hexo g
# 或者hexo generate，生成本地网站静态文件
hexo s
# 或者hexo server，启动服务预览，接下来出现以下内容
C:UsersjinhaDocumentsBlogblog>hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

浏览器里输入http://localhost:4000，就可以预览效果了。肯定很丑，只有一个Hello World 。

先自己写一篇：

hexo new This_is_a_test
# 会在/source/_posts文件夹里生成This_is_a_test.md文件，可以自选Markdown编辑器编辑
hexo g
hexo s

再开启本地预览，这会儿有两篇博客啦。

发布到网站

发布之前，需要给配置一下，让Hexo起码知道往哪里送东西。

在/blog根目录下有站点配置文件：_config.yml，/blog/thems目录下也有主题配置文件：_config.yml，别弄混了。

打开站点配置文件，最下面修改为：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: https://github.com/JinhangZhu/jinhangzhu.github.io.git
    branch: master
# repository填GitHub上的Clone with HTTPS地址

这还不够，url也要设置一下：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# 如果xxx是GitHub用户名下面这样设置就 
url: https://xxx.github.io/
root: /
# 如果xxx不是GitHub用户名，那站点就是在子目录里，配置要如下：
url: https://jinhangzhu.github.io/xxx.github.io
root: /xxx.github.io/

再次部署：

hexo clean # 清除缓存
hexo g
hexo d

好啦，现在可以在浏览器里输入刚刚配置的url，博客上线啦。

修改主题

前往官网 Themes | Hexo，选择主题，找到对应的GitHub的repository页，一般README都写有安装方式。以3-hexo为例，在blog目录下进入命令行，输入：

git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo
# 将主题文件克隆到本地

修改站点配置文件：

theme: 3-hexo

命令行中更新：

cd themes/3-hexo
git pull

回到blog目录下，再进行一下部署就行啦。

hexo clean
hexo g
hexo d

总结

基本搭建方法就是这样了，要是还有更多个性化设置，如评论功能，站点信息，社交外链，图床，网易云音乐等，也是视主题来看的。如果想进行个性设计，建议参考主题官方文档，看这个主题下可以做什么。

好啦，终于写完了。