zoukankan      html  css  js  c++  java
  • 开发小白也毫无压力的hexo静态博客建站全攻略


    本文介绍对开发小白也毫无压力的hexo静态博客建站全攻略,github.iocoding.me的静态博客类似,3年前本人基于本机Windowsgithub.io上创建了静态Github Pages - yanglr,本文以在Coding pages上建站为例。

    基本原理

    配置区: 用于hexo博客的配置,成功部署后原hexo init产生的目录下会生成一个public的文件夹。

    发布区:
    事实上,这一部分就是由配置区生成的public文件夹中的内容。

    发布区的代码必须是公开的,配置区的代码看需要了,如果git部署时使用的是repo: https://用户名:密码@仓库地址这种方式,如果也push到公开代码的仓库就会泄漏个人密码了,所以建议配置在自己的电脑上进行,或使用ssh key的形式代替明文密码。

    方法1 - 本机Windows下建站 (力荐)

    下载安装node.js

    官网下载nodejs的最新LTS版安装即可。

    用管理员权限打开命令行,安装hexo-clihexo

    $ npm install hexo-cli -g
    $ npm install hexo --save
    

    如果安装速度很慢,可以考虑先换淘宝镜像源:

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    再继续进行安装~

    下载安装git

    Git官网下载Git Windows版,使用默认设置进行安装即可。

    初始化hexo

    比如,打算在D:盘进行配置,若将配置的文件夹取名为blog,操作如下:

    $ cd D:
    $ hexo init blog
    

    文件夹名字任意起,根据个人需要了。

    使用hexo generate生成静态资源

    存放hexo配置的文件夹blog创建好之后,就可以使用hexo generate来生成静态资源了,该命令也可简写为"hexo g"。

    在本地运行hexo,看一切是否正常

    此时可使用hexo server(简写为hexo s)来开启本地web服务器查看页面效果,默认情况下在浏览器中打开http://localhost:4000即可看到如下界面:
    img

    Coding.net创建与用户名相同的项目,并启用代码的pages功能

    打开网址https://dev.tencent.com/user/projects/create,即可创建项目。
    由于项目名字与用户名legege007一致,所以我的coding静态pages的访问地址即为 legege007.coding.me, 你用同样的方法,地址会变成你的用户名.coding.me。而如果你的项目名是blog, 而用户名不是blog,则此时coding静态pages的访问地址即为你的用户名.coding.me/blog, 这样会有一个隐含的问题在,就是如果你要绑定个人域名,会导致静态资源js、css等加载失败,即博客会出现有文字但呈现页面混乱的情形。

    这里也亲自淌过坑,最终发现有效的处理办法是:
    创建的项目名必须要和用户名一致,创建的项目名必须要和用户名一致,创建的项目名必须要和用户名一致,强调三连~

    启用通过githexo部署到远程的功能

    完成此项工作,需要先安装hexo-deployer-git, 相应需要在命令行中执行:

    $ npm install hexo-deployer-git --save
    

    安装途中可能会遇到问题:
    "npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself. ",
    这里亲自淌过坑,试了很多方法,最终发现有效的处理办法是:

    $ npm install lodash
    $ npm install eslint@^4.12.0
    

    使用_config.yml来配置hexo

    一开始,我们只需要修改deloy相关才参数即可.

    deploy:
    	type: git  #上传类型 选择git
    	repo: https://legege007:yl15826911621@git.dev.tencent.com/legege007/legege007.git  # 执行 git remote -v 可以获得
    	branch: master  # 部署到 Master分支
    	#message: update blog # 每次提交的信息 不填默认为当前时间
    

    只需要将repo改为你的仓库的ssh版地址即可。
    同时,你还需要在coding项目中加入自己的公钥,具体方法为:
    打开命令行终端输入ssh-keygen -t rsa -C <your_email@example.com>(你的邮箱),连续点击 Enter 键即可。

    Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter] 
    // 此处推荐使用默认地址,也可在密钥后面加后缀,即输入"id_rsa_coding"
    

    找到刚才生成的id_rsa_coding.pub,将其中的内容贴到Coding的公钥信息中:
    img
    此时,git推送应该具有权限了~
    目前为止,_config.yml配置文件只需要改deploy这一处!

    使用hexo clean && hexo g && hexo d发布hexo博客

    不出意外的话,等命令完全跑完就能从静态地址你的用户名.coding.me看到你的博客内容了。

    域名绑定

    先去域名管理系统中加一条CNAME记录, 比如我的域名是https://enjoy233.cn,此处想绑定到https://www.enjoy233.cn,则添加方法如下:
    record1

    _config.yml中的urlhttp://yousite.com改为实际用的,比如我设置为:

    url: //www.enjoy233.cn
    root: /
    

    然后在coding pages的页面中设置如下:
    img2
    过几分钟后,就能通过域名https://www.enjoy233.cn来访问我的博客了。

    主题使用

    个人觉得 hexo主题 Material X还挺不错的,配置文档为 Material X - Wiki~
    就安装试了一下,首先命令行要做的事情是:

    $ cd blog
    $ git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x
    
    $ npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content hexo-recommended-posts
    

    然后将_config.yml中的theme(默认是landscape)配置为:

    theme: material-x
    

    此时,再使用hexo clean && hexo g && hexo d发布博客,然后刷新博客就能看到使用主题后的效果了。

    方法2 - Cloud Studio下建站 (力荐)

    此处介绍在Cloud Studio中使用两个branch建站的方法,master分支作为发布区,config分支作为配置区。如果不另建分支,千万不要使用Cloud Studio的push代码的功能,不然上传的会是配置相关的所有文件(真个blog文件夹,而不是仅有public文件夹下的内容),会导致博客无法正常使用。
    这里也亲自淌过坑,所以强调一下~

    Coding.net创建与用户名相同的项目,并启用pages功能

    打开网址 https://dev.tencent.com/user/projects/create, 开始创建项目。

    我的用户名是legege007,于是就建了个legege007的项目.
    img

    使用现有项目创建工作区

    打开网址 https://studio.dev.tencent.com/dashboard/workspace/create, 即可进入Cloud Studio。
    我选择使用了node.js的环境来进行配置,同时选中项目legege007,然后创建即可。
    img

    使用命令行配置环境

    Cloud studio中默认是Linux系统,我习惯于用root的权限来操作,免得后面还需要用chmod之类的命令来改权限,一进IDE界面,使用命令sudo su切换即可。

    $ sudo su
    

    然后新建config分支后,配置主要在该分支上进行。

    $ git checkout -b config
    

    其他相关命令使用过程具体如下:

    ➜  workspace git:(master) sudo su
    root@coding:/home/coding/workspace# git checkout -b config
    
    root@coding:/home/coding/workspace# git checkout -b config
    Switched to a new branch 'config'
    
    root@coding:/home/coding/workspace# hexo init blog
    
    root@coding:/home/coding/workspace# cd blog/
    root@coding:/home/coding/workspace/blog# hexo g
    
    root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d
    
    root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --save
    
    root@coding:/home/coding/workspace/blog# npm audit fix
    
    root@coding:/home/coding/workspace/blog# npm install lodash
    
    root@coding:/home/coding/workspace/blog# npm install eslint@^4.12.0
    
    root@coding:/home/coding/workspace/blog# npm install hexo-deployer-git --save
    
    root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d
    
    root@coding:/home/coding/workspace/blog# ssh-keygen -t rsa -C "legege007@yeah.net"
    root@coding:/home/coding/workspace# cd ~/.ssh
    root@coding:~/.ssh# ls
    id_rsa  id_rsa.pub  known_hosts
    root@coding:~/.ssh# vim id_rsa.pub
    
    root@coding:/home/coding/workspace/blog# hexo clean && hexo g && hexo d
    

    上述命令和在windows下操作时基本一致遇到问题,解决问题即可~

    _config.yml文件的配置、域名绑定、主题使用等等

    _config.yml文件的配置、域名绑定、主题使用等等,基本上与在Windows下安装完全一样,参考Windows下同样的操作即可,就不再赘述了。

    安装完主题后的界面是:
    UI

    另外,值得一提的是:
    Cloud Studio还有几个优势,即:

    • 可以迅速切换环境,比如hexonode.js.net CoreUbuntuJava等互转,速度超快的。
    • 可以一键部署,除了coding.me的域名可用以外,一键部署后,还提供一个coding.io的域名可以访问。如果暂时没买个人域名,这就是个大福利了~

    img6

    如有帮助,麻烦在右下角"推荐"一下,多谢~



    欢迎在留言区留下你的观点,一起讨论提高。如果今天的文章让你有新的启发,学习能力的提升上有新的认识,欢迎转发分享给更多人。


    欢迎各位读者加入 .NET技术交流群,在公众号后台回复“加群”或者“学习”即可。


    dotNET匠人 公众号名片

    文末彩蛋

    微信后台回复“asp”,给你:一份全网最强的ASP.NET学习路线图。

    回复“cs”,给你:一整套 C# 和 WPF 学习资源!

    回复“core”,给你:2019年dotConf大会上发布的.NET core 3.0学习视频!

  • 相关阅读:
    TFS 2013”无法移除仍为团队管理员身份的标识”
    如何在TFS的过程模板中添加报表
    集成TFS Build生成与SonarQube获取代码分析结果
    TFS 2015 Update 2功能探索
    使用Azure Automation(自动化)定时关闭和启动虚拟机
    TFS 与活动目录AD(Active Directory)的同步机制
    Eclipse 常用快捷键
    JMeter网站并发性测试
    docker安装配置GitLab
    javaWeb项目在用maven启动时必须要用到的坐标
  • 原文地址:https://www.cnblogs.com/enjoy233/p/build_site_guide_using_hexo_and_coding-net_for_beginners.html
Copyright © 2011-2022 走看看