• 使用Node.js+Hexo+Github搭建个人博客


    一、为什么要花时间去搭建个人博客?

    首先说说为什么我想要尝试着去搭建属于自己的Blog,古人云:“好记性不如烂笔头”。一开始我把笔记做在本子上、电脑上,发现要用的时候特别地不方便,而且越记越多、越多越杂。于是将其整理到有道云笔记、百度网盘上,还有手机App可以随时记笔记、搜索查看,挺好。后来慢慢发现自己记的笔记其他人又看不到,不能更好地分享与交流,无意间看到《为什么你应该写博客》一文很是激励着我。所以,我注册了CSDNcnBlogsGithub,希望有自己的个人博客网站并且多向大牛们交流学习。废话不多说,咱们转入正题~

    说明:该文章的内容介绍仅限 Windows 用户,Mac 及 Unix/Linux 用户请参考其他资料如:Hexo 文档

    个人博客示例: Mauger`s Blog

    更新于:2017/12/19 23:21

    二、准备工作

    1. Git 下载(Git for windows 国内下载)、安装(安装时请勾选Add to PATH选项)、配置生成SSH公钥

    2. Github 账号申请配置SSH Keys

    3. Node.js 下载安装

    4. Markdown 下载安装

    说明:本想着讲一下详细的下载、安装和配置工作,却发现还是官方文档说明更好,已附上相关链接。

    三、HEXO 简介及安装使用

    1. Hexo 简介

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

    2. Hexo 安装

    我的 Hexo 安装版本为:vs_3.4.3;Node.js 版本为:vs_8.9.3。安装 Hexo 之前请先确保 Git 及 Node.js 安装成功,接下来只需要使用 NPM 即可完成 Hexo 的安装。在计算机的某个盘符下(其他盘符/文件夹下亦可)新建文件夹 blog,进入到文件夹 blog 中使用 Git Bash (在任意位置单击右键,选择 “Git Bash Here” 即可)进行操作如下:

    $ npm install -g hexo-cli

    Hexo 更新至最新版本,命令如下:

    $ npm update hexo -g

    3. Hexo 初始化

    安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

    $ hexo init blog
    $ cd blog
    $ npm install

    输入以下命令生成静态页面:

    $ hexo generate

    新建完成后,指定文件夹的目录如下:

    .
    ├── _config.yml 网站的配置信息,您可以在此配置大部分的参数
    ├── package.json 应用程序的信息
    ├── scaffolds 模板文件夹
    ├── source 资源文件夹,存放用户资源
    |   ├── _drafts
    |   └── _posts
    └── themes 网站主题文件夹
    

    接着输入命令启动服务:

    $ hexo server

    打印信息如下表示服务启动成功:

    $ hexo server
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
    

    然后在谷歌浏览器中访问:http://localhost:4000/,注意这里不能直接使用快捷键 Ctrl+C 去复制链接,需要单击鼠标右键选择复制或手动输入。注意看打印信息 Press Ctrl+C to stop. 所以你如果随手 Ctrl+C,服务就停了,也就无法访问了。如果操作无误且正确启动服务后仍无法访问,那么请您继续往下看:四、常见问题及解决方法)

    或者(防止80端口被占用,更改端口号)

    $ hexo s --p 8081
    INFO  Start processing
    INFO  Hexo is running at http://localhost:8081/. Press Ctrl+C to stop.
    

    然后在谷歌浏览器中访问:http://localhost:8081/

    4. Hexo 配置_config.yml 文件

    title              网站标题
    subtitle           网站副标题
    description        网站描述
    author             您的名字
    language           网站使用的语言
    timezone           网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC 。
    
    其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

    其他相关详细配置信息请参考:Hexo 配置

    5. Hexo 部署至 Github

    首先需要在 Github 中新建仓库 new repository 为:【您的 Github 名称.github.io】,如:MaugerWu.github.io。然后修改 _config.yml 配置文件 ,打开文件后找到 deploy: 修改如下:(注意冒号后面有一个空格:

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/MaugerWu/MaugerWu.github.io.git
      branch: master
      message: 

    编辑完成后进行保存,接着安装 hexo-deployer-git,命令如下:

    $ npm install hexo-deployer-git --save

    等待安装完成以后,执行如下配置命令:

    $ hexo deploy
    

    重新部署一下,命令如下:

    $ hexo clean
    $ hexo generate
    $ hexo deploy

    在正常部署完成的情况下,打开浏览器输入:【https://您的 Github 名称/github.io】进行访问,例如:https://MaugerWu.github.io。此时你会发现没有网站主题,只有文字没样式并不好看,于是乎,选择一个自己喜欢的 Hexo主题

    • AnimaStars - Add amazing star rotation animation to the official Landscape theme along with some changes on font and colors. - Demo
    • Coney - A theme based on Pacman,especially for Chinese! change the display style, add baidu share module, baidu search module, baidu analytics module, up to top button and so on. - Demo
    • Landscape-x - A fresh looking and responsive theme for Hexo, Modification of Landscape plus theme - Demo
    • Mala - I'm Magic Lamp, Dark theme, one key switch to White theme. Demo
    • NexT - High quality elegant theme. - Demo
    • Okcjs - Site with an animated banner based in the Landscape layout, but modified. Demo
    • Yilia - Responsive and simple style 优雅简洁响应式主题 - Demo(本人使用)

    6. 关于主题更新

    博主本次选择主题为: Yilia ,配置更新请参考:Jacman Theme

    当你每次修改完文件夹 ../themes/yilia 下的配置文件 _config.yml 后,请进入到主题 yilia 下执行以下命令:

    $ git pull

    、常见问题及解决方法

    1. http://localhost:4000/ 无法访问?

    出现该问题的可能原因是端口号4000被占用,将 index.js 文件(若找不到该index.js文件,请参考我的另一篇博客:Everything 工具使用)中的端口号修改为:4001或者其他,重启服务后再次访问即可。

    hexo.config.server = assign({
      port: 4001,
      log: false,
      ip: '0.0.0.0',
      compress: false,
      header: true
    }, hexo.config.server);
    

    2. 博客出现中文乱码问题?

    若出现该问题请使用编辑器 Notepad++ 或 Sublime Text2/3 编辑 _config.yml 文件,设置编辑器的编码为 UTF-8 后进行保存即可。

    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site
    title: Hexo 网站主标题
    subtitle: 网站二级标题/副标题
    description: 网站描述
    author: 网站作者
    language: 网站使用语言
    timezone: 网站时区,Hexo 默认使用您电脑的时区
    

    3. 博客访问中出现404错误?

    若出现该问题,可能是在你修改 _config.yml 文件中 Hexo 主题后导致,比如将 theme: landscape 换成 theme: Next。

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: landscape

    4. 修改个人博客根目录下的配置文件或主题下的配制文件 _config.yml,刷新页面后修改的地方没有生效?

    首先进入到主题文件夹的目录下(如:../blog/themes/yilia/),执行命令:

    $ git pull

    然后返回到文件夹 ../blog 下,重新部署项目执行命令如下:

    $ hexo clean
    $ hexo g
    $ hexo d

    五、名词术语解释

    1. NPM:NPM(node package manager),通常称为node包管理器。顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。参考

    2. NVM:Node Version Manager(Node版本管理器),用它可以方便的在机器上安装并维护多个Node的版本。参考

    3. Markdown:一种轻量级的可以使用普通文本编辑器编写的标记语言。MaHua在线编辑器、或者 MarkdownPad2 工具。参考

    六、感谢

    本博客内容参考了以下几位大牛写的文章,在此表示由衷地感谢各位,分别如下:

    · cnfeat 的《如何搭建一个独立博客——简明Github与Hexo教程》

    · leopardpan 的《HEXO搭建个人博客》

    · Dreajay`s Blog

  • 相关阅读:
    DigitalOcean上使用Tornado+MongoDB+Nginx+Supervisor+DnsPod快速搭建个人博客
    创业三年来的一些感想
    创业三年来的一些感想
    ViEmuVS2013-3.2.1 破解
    瘋子C语言笔记(指针篇)
    瘋子C语言笔记(结构体/共用体/枚举篇)
    瘋子C++笔记
    petalinux add pre-build application to rootfs compile faliure solution
    QA Issue: No GNU_HASH in the elf binary
    视觉SLAM——特征点法与直接法对比以及主流开源方案对比 ORB LSD SVO DSO
  • 原文地址:https://www.cnblogs.com/wumz/p/8030244.html
走看看 - 开发者的网上家园