听说每个程序员都必须有自己的网站！小时候想，也许多年以后，当我每天都长出新胡子，当我脑子里不再有网游，当我见人就笑，当我找不到一丝痕迹的时候当我开始习惯手指时，我的脸上充满了自豪。香烟，当我足以在家扛起一片天空，当我恨我恨的不再恨，我抱怨的不再抱怨，回头看那个男孩，他早已不在，愿你我不死为了我们的时代和我们自己！Hexo简介Hexo是一个快速、简洁、高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，秒级生成主题精美的静态网页。如果你是一个不甘寂寞又想拥有自己网站的程序员，可以按照这篇文章来搭建，然后根据自己的喜好，让你的个人网站更符合自己的审美效果图片宝兴个人网站（bd3star.github.io）1。Hexo安装这一步需要Git和Node.js的支持。1.1初始化电脑，选择一个盘符新建一个文件夹作为博客站点的根目录。文件名不能是中文。在空白处右键GitBashhere1.2安装并设置npm淘宝镜像站。npm默认源的下载速度可能会很慢。建议改用淘宝镜像。执行以下命令设置npm的来源为淘宝镜像站。npmconfigsetregistry"https://registry.npm.taobao.org"在出现的命令行窗口中输入npminstall-ghexo-cli，等待操作完成，然后输入如下命令hexoinit<新建文件夹名称>cd<新建文件夹名称>npminstall等待操作完成，此时文件夹中有很多文件。这里解释一下各个文件夹的作用：c??onfig.yml博客配置文件，博客名称，关键词，作者，语言，博客主题……设置都在里面。package.json应用信息，新添加的插件内容也会出现在里面，我们这里不需要修改内容。Scaffolds脚手架是脚手架的意思。这里有三个模板文件，分别是新增博客文章（posts）、新增博客页面（page）和新增草稿（draft）的目标样式。这部分可以修改的内容是我们可以在模板中添加分类等自定义内容。sourcesource就是放置我们博客内容的地方，也就是resource文件夹。一开始只有一个文件夹，_posts（文章文件夹），之后我们通过命令新建tags（标签文件夹）和categories（分类）页面后，文件夹也会随之添加。themes放置主题文件包的位置。Hexo会根据这个文件生成静态页面。注意：后续命令需要使用站点目录中的GitBash运行（即，在bd3starblog文件夹中）。至此，Hexo框架的本地搭建已经完成。我们运行一下看看：在命令行依次输入以下命令1.3运行#编译文件（生成静态页面）是hexo的简写形式generatehexog#运行文件starthexosbrowser打开http://locakhost:4000或http://127.0.0.1:4000可以看到一个网页，说明Hexo博客在本地运行成功了。1.4扩展新文章或页面。hexonew"title"这里的对应我们要添加的内容，如果是posts就是添加新的文章，如果是page就是添加新的页面。默认是添加帖子。然后我们就可以在对应的posts或者drafts文件夹中找到我们新建的文件，然后在文件中写入Markdown格式。Hexo生成博文和插入图片。修改站点配置文件_config.yml中的post_asset_folder：当这个选项设置为true然后运行hexon"xxxx"生成md博文时，/source/_posts文件夹下有xxxx.md文件一个文件夹同名，比如我生成的hexon'看了这篇文章-别说你不知道IoC是什么'，生成的目录结构如下：_posts看了这篇文章-别说你不知道看完这篇文章不知道IoC是什么-不要说你不知道IoC是什么.md最后，看完这篇文章-不要说你不知道IoC是什么.md当你想导入图片，先复制图片看这篇文章-别说你不知道IoC这个文件夹里是什么，看完这篇文章你只需要按照下面的语法导入图片就可以了-不要sayyoudon'tknowwhatIoCis.md:{%asset_imgimagename.jpgThealternativetextyouwanttoenter%}PS:如果要用插入图片可以安装插件hexo-renderer-marked解决。直接使用npminstallhexo-renderer-marked命令安装即可，然后在_config.yaml中修改配置如下：[](图片.jpg)。2本地博客发布到GithubPages2.1，在Github上创建GithubPages仓库。（ps：需要自己搜索（参考）GithubPages仓库一般步骤是创建bd3star.github.io这个仓库然后留空，最后我们编辑好的html页面和css、js文件会放在这个仓库并浏览访问http://bd3star.github.io打开仓库的index.html页面）2.2、安装发布插件。在站点目录下运行命令行，输入npminstallhexo-deployer-git--save，用于后续博客修改等需要安装各种插件的功能。这对博主很有帮助。等待插件安装完成。2.3、将本地目录与Github相关联。在命令行输入ssh-keygen-trsa-C"emailaddress"，这里需要输入你注册Github的邮箱，比如我之前用example@163.com注册，然后输入ssh-keygen-trsa在命令行-C"example@163.com"输入后，一直回车。打开C:\Users\用户名，在文件夹中找到.ssh文件夹，打开Github，点击右上角头像，设置，选择SSH和GPG密钥，点击新建SSH密钥，将之前复制的内容粘贴到钥匙盒。以上标题可以随意点击添加完成添加。此时返回命令行。尝试与Github连接是否成功。在命令行输入ssh-Tgit@github.com，在弹出的内容中输入yes，看到Hi!您已成功通过身份验证，但GitHub不提供shell访问。表示链接成功。这里应该是你的Github用户名。2.4修改Hexo站点的配置文件。转到博客文件夹并找到_config.yml文件。这是一个博客配置文件。后续修改中会多次使用，修改title和url。url更改为https://.github.io。比如我的用户名是example，就应该输入Pullhttps://example.github.io到文件底部，在deploy下添加一个repo项和一个branch项。填写如下代码：type:gitrepo:git@github.com:/.github.io.gitbranch:master图中也使用了用户名示例。填写好后保存。2.5将生成的页面上传到Github命令行，输入hexog。这时Hexo会根据配置文件渲染出一组静态页面。完成后输入hexod，之前渲染的一系列文件会上传到Github。如果报如下错误，执行下面两行代码。电子邮件地址和名称可以由您自己定义。部署内容到网站是hexodeploy的缩写，也可以简写为hexo-dhexod#启动服务器是hexoserver的缩写hexosTips：也可以直接输入hexog-d直接完成渲染上传。上传完成后，打开https://.github.io可以查看上传的网页。如果页面和本地调试时一样，说明上传完成。如果没有变化，请检查上传时命令行窗口中是否有错误信息，如果没有，清空浏览器缓存试试。#本地运行可以以debug模式运行，方便调试报错信息hexos--debug根据我的经验，除了第一次部署，我们会重点使用hexoinit命令，这是写博客过程中最重要的和发布常用的有：hexon新建文章hexos启动服务器，在本地查看内容hexog生成静态页面hexodeploy部署到网站以上四个步骤。其实我觉得上面的命令就够了。文档中有很多功能，但是我在实际使用过程中没有遇到过。3.美化-使用Next主题现在我们的博客网站是灰色的，没有吸引力，你可以添加一些官方主题这里推荐使用Next主题3.1下载主题参考地址3.1.1）如果你熟悉Git，我建议你通过克隆最新版本，后续更新可以通过gitpull快速更新，而不需要重新下载压缩包。在终端窗口中，导航到Hexo站点目录（我们的站点目录是d://blog/bd3star）。使用Git检出代码：$cdbd3star#注意下面命令后的themes/next是指clone代码，放到我们配置的themes/next目录下#切记不要直接放到site目录下$gitclonehttps://github.com/theme-next/hexo-theme-next.gitthemes/next3.1.2）如果你对Git下载不熟悉，可以点击releases->官网下载最新的zip包并放置站点目录下重命名的文件夹此时themes文件夹下的目录结构如下：3.2启用主题和所有Hexo主题一样。克隆/下载完成后，打开站点配置文件（即站点目录下的_config.yml文件），找到theme字段，将其值改为next。theme:next至此，NexT主题安装完成。接下来我们将验证主题是否已正确启用。切换主题后，验证前，我们最好使用hexoclean清除Hexo的缓存。3.3验证主题首先启动Hexo本地站点，开启debug模式（即添加--debug），整个命令为hexos--debug。在服务启动过程中，注意命令行输出是否有异常信息。信息Hexo在http://localhost:4000运行。按Ctrl+C停止。现在可以使用浏览器访问http://localhost:4000，检查站点是否正常运行。当您看到该站点如下图所示时，您已成功安装NexT主题。这是NexT的默认Scheme-Muse现在，您已经成功安装并启用了NexT主题。下一步，我们将更改一些主题设置，包括个性化和第三方服务的集成。3.4主题设置选择SchemeScheme是NexT提供的一个特性。在Scheme的帮助下，NexT为您提供了许多不同的外观。同时几乎所有的配置都可以在Scheme之间共享。目前NexT支持三种方案，它们是：Muse-默认Scheme，这是NexT的初始版本，黑白主题，大量留白Mist-Muse紧凑版，整齐有序的单列外观Pisces-双-专栏Scheme，小家碧玉通过更改主题配置文件（主题配置文件为站点目录/themes/next/_config.yml）进行类似刷新Scheme切换，搜索scheme关键字。你会看到三行scheme配置，去掉你需要启用的scheme前面的注释#即可。这里自己试一下，删除第一条评论和删除第二条评论，用后面的几次出现，然后重启看看是什么样子的3.5设置语言编辑站点配置文件和主题配置文件，将语言设置成什么你想要所需的语言。建议明确设置自己需要的语言，比如选择简体中文，配置如下：PS：这里有几个重要的路径，在站点根路径之后不再重复：`D:\blog\bd3starblog`站点配置文件路径`站点根路径\_config.yml`主题配置文件路径`站点根路径\themes\next\_config.yml`#这里具体是zh-Hans还是zh-CN看主题是哪个文件/next/languages#另外需要注意的是站点配置文件和主题配置文件都有这个语言language:zh-Hanshexos--debug重启服务查看是否生效这里变成中文配置语言完成3.6设置头像在右侧区域编辑主题配置文件中显示头像，修改字段头像，将值设置为头像链接地址。其中，头像的链接地址可以是：具有完整地址值的InternetURIhttp://example.com/avatar.png站点中的地址会将头像放在主题目录下的source/uploads/中（如果新的uploads目录不存在）配置为：avatar:/uploads/avatar.png或者放在source/images/目录下配置为：avatar:/images/avatar.png头像设置示例头像：http://example.com/avatar.png3.7添加分类修改在主题配置文件下的菜单分支，可以看到添加成功，但是我们不能点击打开新添加的（点击打开报错CannotGET/tags/)别慌，你拿不到标签，创建一个就OK了！hexonewpage'name'#names分别是标签和分类，这样就创建了页面。在控制台输入以下命令：hexonewpage'tags'#创建tags子目录hexonewpage'categories'#创建categories子目录您网站根目录下的source文件夹会分别生成tags、categories和about文件夹。分别修改tags和categories文件夹下的index.md文件，添加type属性，如下：---title:tagdate:2019-01-1420:56:48type:"tags"#新增内容---categories的修改类似。---title:文章分类date:2019-01-1420:53:04type:"categories"#这部分是新增加的---给模板添加分类属性-这样我们下次创建文章的时候hexonntest.md将自动具有类别和标签。我们可以填写内容。现在我们打开scarffolds文件夹下的post.md文件，在其头部添加categories:，这样我们新建的所有文章都会有这个属性，我们只需要填写classification，分类就可以自动形成了网站。title:{{title}}date:{{date}}categories:tags:新建博文时（我们写的博文是在站点目录/source/_posts下创建的），添加tags和categories属性值，您可以在标签和类别界面上检索您的文章。注意：给文章加标签有两种方式：第一种像数组一样，把标签放在括号[]中，用英文逗号隔开第二种方式是用-dash列出source/_posts/vim-node.md---layout:posttitle:vim-node.mddate:2019-01-1422:23:43categories:studynotestags:[vi,vim]---#vimnotes##01学习vi的目的这里省略一堆内容source/_posts/HelloWorld.md---layout:posttitle:HelloWorld.mddate:2019-01-1422:23:43categories:helloworldtags:[hello,world]---这是helloworld文件的内容。省略了很多内容。重启后可以看到如下效果。标签和类别可以点击可以统计，左侧发生了一点变化。3.8个性化添加forkmeongithubin在博客的左上角或右上角，在http://tholman.com/github-cor...://github.com/blog/273选择合适的风格-github-ribbons并将代码复制到themes/next/layout/_layout.swig，在
