【hexo+githubpages】搭建属于自己的博客网站

要用GitHub 和 hexo 搭建个人的博客网站&＃xff0c;首先必须有自己的github账号没什么问题吧&＃xff0c;其次需要提前准备的环境&＃xff1a;下载安装git, nodeJs&＃xff0c;这个怎么去安装我想应该不用说了吧&＃xff08;真不知道的话分别百度nodejs&＃xff0c; git去官网点击下载安装即可&＃xff09;。准备好环境后我们还要安装 hexo:

npm install hexo-cli -g


前面安装了nodejs&＃xff0c;现在就i可以直接用 npm安装 hexo&＃xff0c;同时按下 window &＃43; R 键&＃xff0c;输入 cmd 打开终端&＃xff0c;执行上面的命令&＃xff0c;等待安装完成&＃xff0c;完成以后可用

hexo -v 查看版本&＃xff0c;同时也是验证是否安装完成。

如上图说明我们已经安装完成了&＃xff0c;然后我们来初始化我们的hexo项目:

// blog 是你的项目名字&＃xff0c;取什么名字都行您随意
hexo init blog


然后进入你的项目中&＃xff0c;安装依赖&＃xff1a;

cd blog // 进入项目中
npm install // 安装依赖包


完成后你的项目目录应该包含&＃xff1a;

• node_modules&＃xff1a;依赖包
• scaffolds&＃xff1a;生成文章的模板
• source&＃xff1a;存放你写的文章
• themes&＃xff1a;主题
• _config.yml&＃xff1a;博客的配置文件

hexo server


打开hexo的服务&＃xff0c;在浏览器输入http://localhost:4000/就可以打开你的博客了。

GitHub创建个人仓库

前面说过你要有自己的 github 账号&＃xff0c;如果你还没有&＃xff0c;去注册一个吧&＃xff0c;注册完成后登录到GitHub页面&＃xff0c;你会看到一个 New repository&＃xff0c; 创建一个和你用户名同名的仓库&＃xff0c;后面加上.github.io&＃xff0c; 只有这样将来部署到 Github Page 的时候&＃xff0c; 才会被识别&＃xff0c; 也就是 用户名.github.io&＃xff0c; 我已经创建过了&＃xff0c;再次创建会提示 The repository **xxx.github.io** already exists on this account.&＃xff0c;表示我这个账户已经创建过这个仓库。

如果你已经创建完成了和你注册GitHub同名的仓库&＃xff0c;下面我们来生成ssh密钥&＃xff1a;

在你项目文件夹点击鼠标右键&＃xff0c;点击 git base hero, 打开你的 git base 后&＃xff0c;在base中分别输入&＃xff1a;

git config --global user.name "yourname" // yourname输入你的github用户名
git config --global user.email "youremail" // youremail输入你GitHub的邮箱


可以检查一下你有没有输对

git config user.name
git config user.email


配置GitHub ssh密钥

创建ssh密钥&＃xff0c;一路回车&＃xff0c;可以不设置密码

ssh -keygen -t rsa -C "youremail"


生成完成后&＃xff0c;进入你的用户名文件夹下&＃xff0c;找到.ssh 文件夹&＃xff0c;里面有两个文件。这个就是密钥&＃xff0c;其中 id_rsa是你电脑的私人密钥&＃xff0c;id_rsa.pub 是公共密钥。我们要做的就是把公钥配置到GitHub中&＃xff0c;这样当你访问链接自己的GitHub账号时&＃xff0c;它就会根据公钥配到你的私钥&＃xff0c;当能达到匹配的时候&＃xff0c;你就能通过git上传你的项目到GitHub中了。

下面我们来配置自己的ssh密钥&＃xff0c;进入你的GitHub页面&＃xff0c;点击右上角你的账号头像&＃xff0c;在下拉菜单中找到 settings 菜单&＃xff0c;点击进入设置页面&＃xff0c;然后在设置页面左边的菜单分类中找到 Access 下面的 SSH and GPG keys 菜单&＃xff0c;然后点击 New SSH key 按钮&＃xff0c;把你本地创建的公钥复制后粘贴到key 的输入框中&＃xff0c; title 随便输都行&＃xff0c;然后保存。在gitbase中查看是否成功

ssh -T git&＃64;github.com


将hexo部署到GitHub

如何将hexo和github关联起来呢&＃xff0c;那就要把hexo生成文章部署到GitHub上&＃xff0c;打开站点配置文件_config.yml, 翻到最后&＃xff0c;修改配置&＃xff1a;xxx为你的github账户

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


要完成部署操作&＃xff0c;你还需要安装 deploy-git&＃xff1a;

npm install hexo-deployer-git --save


然后我们需要了解一下hexo的常用命令&＃xff1a;

// 新建一个网站&＃xff0c;如果没设置 floder hexo默认在当前文件夹下创建网站
hexo init [flolder]
// 新建一篇文章&＃xff0c;如果没有设置 layout 的话&＃xff0c;默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话&＃xff0c;请使用引号括起来。
hexo new [layout] <title>
// 生成静态文件。
hexo generate // hexo g -d, 文件生成后立即部署网站
// 发表草稿
hexo publish [layout] <filename>
// 启动服务器。默认情况下&＃xff0c;访问网址为&＃xff1a; http://localhost:4000
hexo server
// 部署网站, 可以简写为hexo d
hexo deploy
// 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo clean


hexo generate 顾名思义&＃xff0c;生成静态文章&＃xff0c;可以用 hexo g缩写
hexo deploy 部署文章&＃xff0c;可以用hexo d缩写

当然你也可以用 hexo g -d 一步完成部署。

如果在执行部署网站的时候出现下列错误: ”Software caused connection abort fatal: Could not read from remote repository.”, 很可能是dns解析问题&＃xff0c;用 ssh -T git&＃64;github.com 在gitbase中检测是否正常&＃xff0c;打开cmd输入ping github.com是否能连接&＃xff0c;配置本地的hosts 文件&＃xff0c; 文件路径 c:\windows\system32\drivers\etc\hosts,在末尾添加上&＃xff1a;

140.82.112.4 github.com git
140.31.16.184 github.global.ssl.fastly.net


gitbase 再次ssh -T git&＃64;github.com成功。

hexo的基本配置

网站 (# site)

网址(#URL)

我们在配置文件中将url改成自己的网站域名&＃xff0c;permalink是我们生成文章时候的那个链接格式。链接的变量很多&＃xff0c;可以点击上面的永久链接去官方文档查找配置。

目录#Directory

# Directory
source_dir: source # 资源文件夹&＃xff0c;这个文件夹用来存放内容。
public_dir: public # 公共文件夹&＃xff0c;这个文件夹用于存放生成的站点文件。
tag_dir: tags # 标签文件夹
archive_dir: archives # 归档文件夹
category_dir: categories # 分类文件夹
code_dir: downloads/code # Include code 文件夹&＃xff0c;source_dir 下的子目录
i18n_dir: :lang # 国际化&＃xff08;i18n&＃xff09;文件夹
skip_render: # 跳过指定文件的渲染


如果您刚刚开始接触 Hexo&＃xff0c;通常没有必要修改这一部分的值。

文章#Writing

# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post # 预设布局
titlecase: false # 把标题转换为 title case
auto_spacing: false # 在中文和英文之间加入空格
external_link:enable: true # Open external links in new tabfield: site # Apply to the whole siteexclude: &＃39;&＃39; # 需要排除的域名
filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false # 显示草稿
post_asset_folder: false # 启动 Asset 文件夹
relative_link: false # 把链接改为与根目录的相对位址
future: true # 显示未来的文章
highlight: # 代码块的设置, 请参考 Highlight.js 进行设置enable: trueline_number: trueauto_detect: falsetab_replace: &＃39;&＃39;wrap: truehljs: false
prismjs: # 代码块的设置, 请参考 PrismJS 进行设置enable: falsepreprocess: trueline_number: truetab_replace: &＃39;&＃39;


分类 & 标签

# Category & Tag
default_category: uncategorized # 默认分类
category_map: # 分类别名
tag_map: # 标签别名


分页

# Pagination
per_page: 10 # 每页显示的文章量 (0 &＃61; 关闭分页功能)
pagination_dir: page # 分页目录


主题

通常情况下&＃xff0c;Hexo 主题是一个独立的项目&＃xff0c;并拥有一个独立的 _config.yml 配置文件。

除了自行维护独立的主题配置文件&＃xff0c;你也可以在其它地方对主题进行配置。

hexo官网有300多个主题&＃xff0c;在这里下载你喜欢的主题进行修改就可以了。直接在github链接上下载下来&＃xff0c;然后放到theme文件夹下就行了&＃xff0c;然后再在刚才说的配置文件中把theme换成那个主题文件夹的名字&＃xff0c;它就会自动在theme文件夹中搜索你配置的主题。

我们也可以自定义自己的主题&＃xff0c;或者修改已经安装的主题的样式。

跳转 我的博客 查看&＃xff01;