Git+Hexo搭建静态博客网站

最新推荐文章于 2024-05-09 17:19:57 发布

叔叔有糖吃

最新推荐文章于 2024-05-09 17:19:57 发布

阅读量2.6k

点赞数 3

分类专栏： Web 文章标签： git hexo 静态博客

本文链接：https://blog.csdn.net/u011771755/article/details/48027307

版权

Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装环境

安装Git

版本管理工具，可以将我们生成的静态网页托管到GitHub上

设置全局
- git config --global user.name "name" 配置username
- git config --global user.email "邮箱" 配置邮箱
设置ssh

ssh -keygen -t rsa -C "邮箱" 设置rsa的数字指纹，一个是公钥，一个是私钥
公钥要提交到github上，私钥需要自己保存
验证ssh key

ssh -T git@github.com 会用本地的私钥和github的公钥进行匹配

安装node.js

下载：http://nodejs.org/download/ 安装时直接保持默认配置即可。

配置Github

建立Repository

建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】
并且你的github账户必须已经邮箱验证过了才可以。

安装Hexo

安装hexo

打开Git命令行，执行如下命令：$ npm install -g hexo

快速开始

配置博客

在电脑中建立一个名字叫「Hexo」的文件夹（比如我建在了D:\Hexo），然后在此文件夹中>右键打开Git Bash。执行下面的命令
$ hexo init

看到控制台如下输出：

[info] Copying data

[info] You are almost done! Don’t forget to run npm install before >you start blogging with Hexo!

Hexo随后会自动在目标文件夹建立网站所需要的文件。然后按照提示，运行 npm install（在 /D/Hexo下）

npm install会在D:\Hexo目录中安装 node_modules。
开启hexo服务

运行下面的命令（在 /D/Hexo下）

$ hexo server

[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

表明Hexo Server已经启动了，在浏览器中打开 http://localhost:4000/，这时可以看到Hexo已为你生成了一篇blog。你可以按Ctrl+C 停止Server。
创建一篇新博客
新打开一个git bash命令行窗口，cd到/D/Hexo下，执行下面的命令

$ hexo new "My New Post"

[info] File created at d:\Hexo\source_posts\My-New-Post.md

刷新 http://localhost:4000/，可以发现已生成了一篇新文章 “My New Post”。
- 注意问题
  有一个问题，发现 “My New Post” 被发了2遍，在Hexo server所在的git bash窗>口也能看到create了2次。
  因此在hexo new文章时，需要stop server。
生成静态的网站文件

执行下面的命令，将markdown文件生成静态网页。

$ hexo generate该命令执行完后，会在 D:\Hexo\public\ 目录下生成一系列html，css等文件
编辑文章

可以使用一个支持markdown语法的编辑器（比如 Sublime Text 2）来编辑该文件。
部署到Github

部署到Github前需要配置_config.yml文件，首先找到下面的内容
```
# Deployment


## Docs: http://hexo.io/docs/deployment.html

deploy:
    type:
然后将它们修改为

# Deployment


## Docs: http://hexo.io/docs/deployment.html

deploy:
    type: github
    repository: git@github.com:githubname/githubname.github.io.git
    branch: master
```
- 注意问题1
  
  Repository：必须是SSH形式的url（git@github.com:zhchnchn/zhchnchn.github.io.git），而不能是HTTPS形式的url（https://github.com/zhchnchn/zhchnchn.github.io.git），否则会出现错误：
- 注意问题2
  
  如果你是为一个项目制作网站，那么需要把branch设置为gh-pages。
测试部署到github的网站

当部署完成后，在浏览器中打开http://githubname.github.io ，正常显示网页，表明部署成功。
后期部署步骤可以简化为下面三个命令

每次部署的步骤，可按以下三步来进行。

hexo clean

hexo generate

hexo deploy

配置Hexo

在_config.yml文件中可以设置博客的标题，作者等信息

安装主题

这里我选择了hexo-theme-yilia：https://github.com/litten/hexo-theme-yilia 主题

主题的安装

将Git Shell 切到/D/Hexo目录下，然后执行下面的命令，将yilia下载到 themes/yilia 目录下。
$git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia 修改你的博客根目录/D/Hexo下的config.yml配置文件中的theme属性，将其设置为yilia。
更新yilia主题

cd themes/yilia

git pull

主题的配置

如果yilia的默认设置不能满足需要的话，你可以修改 /themes/yilia/下的配置文件_config.yml来定制。

多说评论框的添加


#是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key


#若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论

duoshuo: true

友情链接的添加


#是否开启友情链接


#不开启——


#friends: false


#开启——

friends:
    奥巴马的博客: http://localhost:4000/
    卡卡的美丽传说: http://localhost:4000/
     本泽马的博客: http://localhost:4000/

Custom 404页面

在Hexo/source目录下新建一个404.html文件
404.html的内容设置为下面的内容

---
layout: default
---
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>                                                                                                                                        
    </head>
    <body>
         <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>
    </body>
</html>

优化Hexo

中文乱码

在md文件中写中文内容，发布出来后为乱码，原因是md的编码不对，将md文件另存为“UTF-8”编码的文件即可解决问题

下面是我用git和hexo搭建的yilia主题静态博客

http://guxuewu.com

叔叔有糖吃

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Git+Hexo搭建静态博客网站

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。安装环境安装Git版本管理工具，可以将我们生成的静态网页托管到GitHub上设置全局git config --global user.name "name" 配置usernamegit config --global user.email "邮箱"
复制链接

扫一扫