使用hexo+github搭建个人微博

谁践踏了优雅 2022-06-08 21:13 210阅读 0赞

## 使用hexo+github搭建个人微博 ##

**使用hexo+github搭建博客的步骤为：**  
1.软件的安装；  
(1.)安装Node；  
(2.)安装Hexo;  
(3.)安装Git;  
(4.)安装主题；  
2.内容的发布;  
使用hexo插件发布博客内容;  
*详细步骤如下：*

--------------------

**前提条件**  
需要有个github账号。  
一般做为一个开发人员，github肯定是访问过的，相信绝大多数开发人员会注册拥有一个github账号，因为这是全球知名的代码托管网站。全世界均可访问到它。若还没有可以到Github注册。

基本软件NodeJS，Git，Hexo  
在机子上需要使用到NodeJS进行部署，安装插件等。下载NodeJs。  
安装Git，进入Git下载页面选择合适的版本进行下载。  
如果不清楚Hexo是什么？？她是一个快速，简介，高效的博客框架。更多详情可以到Hexo官网读下这个文档就知道了。

安装完成Git及NodeJs后，那么就可以开始准备安装Hexo了。  
打开GitBash，使用npm命令来安装Hexo程序。

安装Hexo

--------------------

在命令行输入如下命令:  
npminstall−ghexo−cli由于众所周知的原因,可能你执行这条命令会报错，如果你不会调整姿势上网，可以使用淘宝npm镜像，执行如下命令即可： npm install -g cnpm –registry=[https://registry.npm.taobao.org][https_registry.npm.taobao.org]  
之后很多 npm 命令可以使用 cnpm 代替。执行下面命令即可安装 Hexo :  
cnpminstall−ghexo−cli可能出现一些WARN,可以不用理会，然后执行： cnpm install hexo –save  
输入$ hexo -v命令，出现下面所示的版本信息，则说明安装成功

![这里写图片描述][SouthEast]

这样表示Hexo安装成功了。  
到此，搭建个人微博需要的3个软件就安装完成了。

接下来就需要进行相关配置及插件安装了。  
所有的操作均在GitBash命令行中进行操作。

**建站**  
首先简历一个简单的站，创建初始化一个简单的文件夹。

$ hexo init myGitPages
    $ cd myGitPages
    $ npm install

这样就可以新建所需要的文件。  
安装完成后，可以看到如下的几个主要文件。

![这里写图片描述][SouthEast 1]

其中:  
\_config.xml 可以配置网站信息。可以参考配置  
package.json 应用程序信息。有默认配置一些组件，可以自己根据需要添加或者移除。  
scaffolds 模板文件夹。当新建文章时，Hexo会根据scaffold来建立文件。  
source 资源文件夹，存放用户资源的地方。  
themes 主题文件夹。Hexo会根据主题来生成静态页面。

主题

作者：techinsight  
链接：[http://www.jianshu.com/p/4324e8a147e7][http_www.jianshu.com_p_4324e8a147e7]  
來源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

**主题**

--------------------

Hexo可以有很多主题，在Github首页搜索框内输入”hexo theme”，可以搜索到很多主题，目前我使用的是litten的yilia主题。

可以在进入到建立的站点文件夹下（我的是myGitPages）下，下载yilia主题

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下载完成后，打开站点个目录下（myGitPages）的\_config.xml文件，修改其中的theme属性成

theme: yilia

这样就可以在发布文章的手看到修改的主题，或者通过hexo server进行查看。

**发布**

--------------------

发布文章前一定要确认已经安装了hexo-deployer-git插件，否则无法正常发文章到git上的。

$ npm install hexo-deployer-git --save

来安装git插件。

到目前基本上需要的从博客站点建立，到发布所需要的软件准备工作都就绪了。

PS：yilia要显示所有文章还需要进行一个配置，下文会写到。

在开始写文章发布之前可以，先查本地运行查看Hexo运行情况，运行

$ hexo server

在dos窗口的命令为（对应的安装路径下）:hexo s;\[启动hexo\]

启动服务器。默认情况下，端口地址是4000。打开浏览器，访问：[http://localhost:4000][http_localhost_4000]  
查看效果。若访问出错，没有打开页面，那么可能是端口被占用导致。此时可以使用

$ hexo server -p 5000

修改端口，然后重新输入端口号进行查看。  
若访问成功，默认看到的是hello-wold.md（即source/\_post文件夹下的默认创建文件）文件发布后的效果。

**准备工作结束，可以开始写文章发布**

--------------------

用github+hexo搭建完个人博客后，朋友们应该很想知道怎么在上面写博文吧，这里介绍一个很简单的方法

你可以使用CSDN网上面提供的MarkDown编辑器 [http://write.blog.csdn.net/mdeditor][http_write.blog.csdn.net_mdeditor] (在csdn博客写新文章的时候能切换到这种编辑器)，写好文章后，找到菜单栏的“导出到本地”选项  
![这里写图片描述][SouthEast 2]

以md格式导出到本地，然后copy该md文件，粘贴到你当初建的博客站点文件夹下的source\\ \_posts目录下，一个md文件对应一篇博客文章。

--------------------

在写完文章之后就需要将写的文章部署到GitHub上去了。  
来看下这个过程。

由于要发布博客到GitHub实际上使用了GitHub Pages功能，因此可以到这里来查看相关的介绍。其中详细介绍了Pages概念，及如何建立自己的站点。

一下先简绍下我自己的建立过程。

建立GitHub仓库

建立仓库，用以部署Hexo生成的博客。如果还没有GitHub账号就需要注册了。  
有GitHub账号的小伙伴可以到Github网站创建一个新仓库，如下显示。

![这里写图片描述][SouthEast 3]

新仓库

其中仓库名有所讲究，它必须是username.github.io ，这里的username有两种情况，其一是你的用户名即注册时使用的名称，其二是组织名称（此处组织名称并未尝试）。如下图可以看下位置。

![这里写图片描述][SouthEast 4]

Hexo发布前需要配置_config.xml

在站点根目录下（myGitPages），找到并编辑\_config.xml文件，如下部分。

# Deployment
    deploy:
        type: git
        repository: git@github.com:yourname/yourname.github.io.git
        branch: master

将新建的仓库信息及分支信息配置到\_config.xml，让Hexo知道部署到GitHub的那个仓库。

发布

最后，就需要发布了。可以在站点根目录下（myGitPages）下运行一下命令：

$ hexo clean #清除原有生成的相关文件
    $ hexo generate #重新生成静态页面
    $ hexo deploy #进行部署

在运行部署命令时，会弹出ssh密码输入确认框，输入username.github.io仓库密码，点击OK即可进行顺利发布。

然后就去访问你的个人站点吧。你会看到发布的文章。

PS: 不同的主题可能在主题中还需要进行一定的配置，这个看个人喜好使用哪个主题，我使用的是yilia主题，其在初次查看所有文章时会发现展示的不是文章列表。那么按照主题作者提示进行配置后，重新部署就可以了。

1.nodejs版本大于6.2（最新的nodejs肯定符合）。  
2.在博客根目录下（不是yilia根目录下）执行如下命令： npm i hexo-`generator-json-content --save`  
3.在根目录\_config.xml文件内配置：

# 查看yilia主题下所有文章配置 #

jsonContent:
           meta: false
           pages: false
           posts:
               title: true
               date: true
               path: true
               text: false
               raw: false
               content: false
               slug: false
               updated: false
               comments: false
               link: false
               permalink: false
              excerpt: false
               categories: false
               tags: true

**PS：设置个人头像注意的要点**

1.注意相对路径 绝对路径 根路径 的区别
    2.注意yilia主题对格式的严格要求，比如空格什么的;

具体配置步骤如下：  
1.将图片资源放置指定的文件夹下：  
![这里写图片描述][SouthEast 5]  
2.注意图片路径的格式：  
![这里写图片描述][SouthEast 6]

[https_registry.npm.taobao.org]: https://registry.npm.taobao.org
[SouthEast]: /images/20220609/4706f9396f7a48f5a3aa8b1757ef99dd.png
[SouthEast 1]: /images/20220609/02ce86b577a04ab182d5d2f0b1e4d753.png
[http_www.jianshu.com_p_4324e8a147e7]: http://www.jianshu.com/p/4324e8a147e7
[http_localhost_4000]: http://localhost:4000
[http_write.blog.csdn.net_mdeditor]: http://write.blog.csdn.net/mdeditor
[SouthEast 2]: /images/20220609/d7c4b307f1ba4529afdcee4340bd63f6.png
[SouthEast 3]: /images/20220609/aa4370974858471391afeeb4200f4073.png
[SouthEast 4]: /images/20220609/68ffb478992648ad89ab470161b86ebc.png
[SouthEast 5]: /images/20220609/696ad9182034440282136b4caabfea52.png
[SouthEast 6]: /images/20220609/e73590bc33664a279d4e93ea06dee7bc.png