Git+Hexo搭建静态博客网站

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 [email protected] 会用本地的私钥和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: [email protected].com:githubname/githubname.github.io.git
        branch: master
    • 注意问题1

      Repository:必须是SSH形式的url([email protected]: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

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-27 13:02:26

Git+Hexo搭建静态博客网站的相关文章

基于Hexo搭建个人博客网站

## 准备工作 首先下载[nodejs](https://nodejs.org/en/download/),一路next安装即可.验证是否安装成功: ```bash node -v # 输出 v10.15.1 npm -v # 输出 6.8.0 ``` 接下来更改npm的安装源,这能大大加快安装包的速度. ```bash npm get registry # 输出默认源 https://registry.npmjs.org/ npm config set registry http://regi

hexo 搭建静态博客 + Next 主题配置

参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g 或者可以局部安装 hexo npm install hexo -S 初始化博客 hexo init xxx 或者进入到一个空文件夹里,执行:hexo init 网站配置文件详解 # Hexo Configuration ## Docs: https://hexo.io/docs/configurat

使用Octopress搭建静态博客网站

1.Octopress简介 基础知识 Octopress是一个基于jekyll的静态的静态博客站点生成系统,很大程度的简化了jekyll搭建博客过程. 为什么用Octopress而不用wordpress wordpress有太多的缺点:需要买主机,域名.它还是动态的,并且过度的依赖数据库,迁移成本高. Octopress特点 命令行操作 纯文本写博客 定制性高 纯静态 版本化管理 迁移成本低 简洁的Ruby框架 Markdown语法 Octopress目录结构 主题插件等文件夹 source文件

Octopress 搭建静态博客网站环境配置

备忘录:记录一下搭建过程 1.安装Git 鼠标右键--打开Git Bash 打开命令行配置git(要有github账号:name) $ git config --global user.name "name" 配置git的全局用户信息(可以看到是哪个用户,哪个邮箱提交的) $ git config --global user.email "[email protected]" 生成秘钥: $ ssh-keygen -t rsa -C "[email pro

使用hexo和github搭建个人博客网站

使用hexo+github可以免费.快速地搭建一个静态博客网站,并且使用hexo提供的命令以及git自身的功能可以很便捷地管理博客. 使用github部署静态页面 在了解hexo之前,我们先看看如何使用github部署静态页面. 注册github账号 访问github官网注册一个账号,该流程和一般网站注册账号一样,在此不赘述. 创建一个git仓库 其他项如果需要可以自主填写,这里只填写仓库名,点击Create repository创建仓库. 提交一个测试页面 执行git clone命令将仓库克隆

windows上使用mkdocs搭建静态博客

windows上使用mkdocs搭建静态博客 之前尝试过用HEXO搭建静态博客,最近发现有个叫mkdocs的开源项目也是搭建静态博客的好选择,而且它支持markdown格式,下面简要介绍一下mkdocs的环境搭建过程 项目地址:https://github.com/mkdocs/mkdocs 介绍:英文版----http://www.mkdocs.org/ 中文版----http://markdown-docs-zh.readthedocs.io/zh_CN/latest/ 使用环境:win8.

Hexo+Github/Coding免费搭建个人博客网站

体验更优排版请移步原文:http://vblog.win/blogs/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把平时遇到的问题和解决问题的方式方法记录下来,顺便提升自己的表达能力.总结能力:另一方面,个人博客就像是自己在网络世界中的一个小家,一个完全属于自己的空间,你可以在这里尽情发挥,别人可以通过它来了解你.前段时间偶然间发现了Hexo,看了两天官方文档,参考网上教程,搭建了自己的个人网站:http://

使用Hexo搭建GitHub博客(2018年Mac版)

关于本文 本文仅记录自己学习搭建Hexo博客之时,搭建过程中掉坑的历程总结,对零基础起步的观众朋友可能缺乏某些基础技术的指导,请优先食用下述两篇优质教程: [2018更新]小白独立搭建博客-Github Pages和Hexo简明教程 - Ryane的个人页面 - 开源中国 GitHub+Hexo 搭建个人网站详细教程 ※ 为了更优质的排版视觉效果,欢迎移步到简书浏览:使用Hexo搭建GitHub博客(2018年Mac版) 十万个为什么 什么是Hexo 度娘谷歌搜索了Hexo各种资料解说,个人感觉

Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护.但是该主题的原生态,可能或多或少不满足我们当前的需求,因此需要我们对其进行优化,达到我们想要的效果. 因此这篇文章和下篇文章主要就是针对主题的优化进行书写的. 注意事项 1.优化完毕或者新建博客后需要 hexo g 生成静态文件: 2.然后重新启动服务,使用命令 hexo s -p 80 3.浏览器