精华内容
下载资源
问答
  • Hexo

    2019-11-26 15:12:40
    Hexo 本着想做诗人的原则,本猫最近在研究Hexo啦~ 本着虽不合格但也是个攻城狮的原则,记录下我的艰辛建站过程。 Prepare 唔,首先,打开hexo的官方文档。支持中文哦~ link 在此~ 文档说的还是蛮详细的,对于...

    Hexo

    本着想做诗人的原则,本猫最近在研究Hexo啦~
    本着虽不合格但也是个攻城狮的原则,记录下我的艰辛建站过程。


    Prepare

    唔,首先,打开hexo的官方文档。支持中文哦~
    link 在此~
    文档说的还是蛮详细的,对于小白非常友好。
    我在建站时遇到的问题是 hexo init <folder> 无法成功,从猫哥那拷来一个,done。
    本猫是WIN10,基本操作大概是:
    install Node.js 安装时check Add to PATH。
    install Git 此处要吐槽,我司的block做的差极了。
    npm install -g hexo-cli powershell.
    执行hexo有两种方式
    1. npm hexo <command>
    2. hexo <command> 官方说把hexo所在目录下的 node_modules加到PATH里就可以直接用。
    官方提供:echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile
    以上完成,hexo prepare part就完成啦。

    Init

    我的prepare一帆风顺,于是开开心心的来init hexo文件夹。搞了半天,一直不成功,唉。
    官方提供的commands
    hexo init <folder> //cp folder.
    cd <folder> powershell.
    npm install powershell.
    install完了之后,可以直接在powershell里hexo s,会生成官方配置的Hello World
    hexo clean --clean page
    hexo g --update page

    Config Change

    改主题

    生成页面成功之后,第一个想做的事情就是先改个主题嗷嗷。
    hexo官网上提供了很多主题。猫哥说自己做比较好,但他并没有自己做。 嗯。
    看的眼花缭乱的我,选了NexT。 换个主题用着先。

    发文章

    唉,我的写诗环节。好累,下回写。

    展开全文
  • hexo

    2019-02-01 17:27:22
    安装hexo npm install -g hexo-cli 建站 $ hexo init &lt;folder&gt; $ cd &lt;folder&gt; $ npm install 新建完成后,指定文件夹的目录如下: . ├── _config.yml ├── package.json ├── ...

    安装hexo

    npm install -g hexo-cli
    

    建站

    $ hexo init <folder>
    $ cd <folder>
    $ npm install
    

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

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    _config.yml
    网站的 配置 信息,您可以在此配置大部分的参数。
    

    package.json

    应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
    
    package.json
    {
      "name": "hexo-site",
      "version": "0.0.0",
      "private": true,
      "hexo": {
        "version": ""
      },
      "dependencies": {
        "hexo": "^3.0.0",
        "hexo-generator-archive": "^0.1.0",
        "hexo-generator-category": "^0.1.0",
        "hexo-generator-index": "^0.1.0",
        "hexo-generator-tag": "^0.1.0",
        "hexo-renderer-ejs": "^0.1.0",
        "hexo-renderer-stylus": "^0.2.0",
        "hexo-renderer-marked": "^0.2.4",
        "hexo-server": "^0.1.2"
      }
    }
    

    scaffolds

    模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
    
    Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
    

    source

    资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
    

    themes

    主题 文件夹。Hexo 会根据主题来生成静态页面
    

    配置

    您可以在 _config.yml 中修改大部份的配置。

    网站

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

    网址

    参数	描述	默认值
    url	网址	
    root	网站根目录	
    permalink	文章的 永久链接 格式	:year/:month/:day/:title/
    permalink_defaults	永久链接中各部分的默认值	
    网站存放在子目录
    如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
    

    目录

    参数	描述	默认值
    source_dir	资源文件夹,这个文件夹用来存放内容。	source
    public_dir	公共文件夹,这个文件夹用于存放生成的站点文件。	public
    tag_dir	标签文件夹	tags
    archive_dir	归档文件夹	archives
    category_dir	分类文件夹	categories
    code_dir	Include code 文件夹	downloads/code
    i18n_dir	国际化(i18n)文件夹	:lang
    skip_render	跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。	
    提示
    如果您刚刚开始接触Hexo,通常没有必要修改这一部分的值。
    

    文章

    参数	描述	默认值
    new_post_name	新文章的文件名称	:title.md
    default_layout	预设布局	post
    auto_spacing	在中文和英文之间加入空格	false
    titlecase	把标题转换为 title case	false
    external_link	在新标签中打开链接	true
    filename_case	把文件名称转换为 (1) 小写或 (2) 大写	0
    render_drafts	显示草稿	false
    post_asset_folder	启动 Asset 文件夹	false
    relative_link	把链接改为与根目录的相对位址	false
    future	显示未来的文章	true
    highlight	代码块的设置	
    相对地址
    默认情况下,Hexo生成的超链接都是绝对地址。例如,如果您的网站域名为example.com,您有一篇文章名为hello,那么绝对链接可能像这样:http://example.com/hello.html,它是绝对于域名的。相对链接像这样:/hello.html,也就是说,无论用什么域名访问该站点,都没有关系,这在进行反向代理时可能用到。通常情况下,建议使用绝对地址。
    
    分类 & 标签
    参数	描述	默认值
    default_category	默认分类	uncategorized
    category_map	分类别名	
    tag_map	标签别名	
    日期 / 时间格式
    Hexo 使用 Moment.js 来解析和显示时间。
    
    参数	描述	默认值
    date_format	日期格式	YYYY-MM-DD
    time_format	时间格式	H:mm:ss
    分页
    参数	描述	默认值
    per_page	每页显示的文章量 (0 = 关闭分页功能)	10
    pagination_dir	分页目录	page
    扩展
    参数	描述
    theme	当前主题名称。值为false时禁用主题
    deploy	部署部分的设置
    

    指令

    指令语法描述
    inithexo init [folder]新建一个网站,如果没有floder,在当前目录创建
    newhexo new [layout] 新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
    generatehexo generate生成静态文件。-d,–deploy 文件生成后立即部署网站。-w, --watch 监视文件变动。(简写为hexo g)
    publishhexo publish [layout] 发表草稿
    serverhexo server启动服务器。默认情况下,访问网址为: http://localhost:4000/。-p, --port 重设端口。-s, --static 只使用静态文件。-l, --log 启动日记记录,使用覆盖记录格式
    deployhexo deploy部署网站-g, --generate部署之前预先生成静态文件。该命令可以简写为:$ hexo d
    renderhexo render [file2] …渲染文件。-o, --output设置输出路径
    migratehexo migrate 从其他博客系统 迁移内容。
    cleanhexo clean清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令
    listhexo list 列出网站资料。
    versionhexo version显示Hexo版本

    选项

    安全模式
    hexo --safe
    调试模式
    hexo --debug
    简洁模式
    hexo --silent
    
    自定义配置文件的路径,自定义配置文件的路径,执行后将不再使用 _config.yml。
    hexo --config custom.yml
    
    显示草稿,显示 source/_drafts 文件夹中的草稿文章
    hexo --draft
    
    自定义cwd,自定义当前工作目录(Current working directory)的路径。
    hexo --cwd /path/to/cwd
    
    

    迁移

    Rss

    首先,安装 hexo-migrator-rss 插件。
    $ npm install hexo-migrator-rss --save
    插件安装完成后,执行下列命令,从 RSS 迁移所有文章。source 可以是文件路径或网址。
    $ hexo migrate rss <source>
    

    Jekyll

    把 _posts 文件夹内的所有文件复制到 source/_posts 文件夹,并在 _config.yml 中修改 new_post_name 参数。
    new_post_name: :year-:month-:day-:title.md
    Octopress
    把 Octopress source/_posts 文件夹内的所有文件转移到 Hexo 的 source/_posts 文件夹,并修改 _config.yml 中的 new_post_name 参数。
    new_post_name: :year-:month-:day-:title.md
    

    WordPress

    首先,安装 hexo-migrator-wordpress 插件。
    
    $ npm install hexo-migrator-wordpress --save
    在 WordPress 仪表盘中导出数据(“Tools” → “Export” → “WordPress”)(详情参考WP支持页面)。
    
    插件安装完成后,执行下列命令来迁移所有文章。source 可以是 WordPress 导出的文件路径或网址。
    
    $ hexo migrate wordpress <source>
    
    注意

    这个插件并不能完美地实现WordPress->Hexo的数据转换,尤其是在处理WordPress的分类方面存在问题(见Front-matter中的分类与标签)。因此,建议您在迁移完成后,手工审阅所有生成的markdown文件,检查其中是否有错误。对于文章数量较大的WordPress站点,这项工作可能要花很长的时间。

    Joomla

    首先,安装 hexo-migrator-joomla 插件。
    $ npm install hexo-migrator-joomla --save
    使用 J2XML 组件导出 Joomla 文章。
    插件安装完成后,执行下列命令来迁移所有文章。source 可以是 Joomla 导出的文件路径或网址。
    $ hexo migrate joomla <source>
    
    展开全文
  • hexo史上最全搭建教程

    万次阅读 多人点赞 2018-09-16 20:19:08
    npm install hexo-deployer-git --save 然后 hexo clean hexo generate hexo deploy 其中 hexo clean清除了你之前生成的东西,也可以不加。 hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写 hexo deploy ...

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CF2m4SwD-1628816637063)(http://peu31tfv4.bkt.clouddn.com/1.jpg)]

    花了几天搭建了个网站,先上链接,欢迎来访:fangzh的个人博客

    现在市面上的博客很多,如CSDN,博客园,简书等平台,可以直接在上面发表,用户交互做的好,写的文章百度也能搜索的到。缺点是比较不自由,会受到平台的各种限制和恶心的广告。

    而自己购买域名和服务器,搭建博客的成本实在是太高了,不光是说这些购买成本,单单是花力气去自己搭这么一个网站,还要定期的维护它,对于我们大多数人来说,实在是没有这样的精力和时间。

    那么就有第三种选择,直接在github page平台上托管我们的博客。这样就可以安心的来写作,又不需要定期维护,而且hexo作为一个快速简洁的博客框架,用它来搭建博客真的非常容易。

    Hexo简介

    Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

    教程分三个部分,

    • 第一部分:hexo的初级搭建还有部署到github page上,以及个人域名的绑定。
    • 第二部分:hexo的基本配置,更换主题,实现多终端工作,以及在coding page部署实现国内外分流
    • 第三部分:hexo添加各种功能,包括搜索的SEO,阅读量统计,访问量统计和评论系统等。

    第一部分

    hexo的初级搭建还有部署到github page上,以及个人域名的绑定。

    Hexo简介

    Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

    Hexo搭建步骤

    1. 安装Git
    2. 安装Node.js
    3. 安装Hexo
    4. GitHub创建个人仓库
    5. 生成SSH添加到GitHub
    6. 将hexo部署到GitHub
    7. 设置个人域名
    8. 发布文章

    1. 安装Git

    Git是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章,上传到GitHub的工具。Git非常强大,我觉得建议每个人都去了解一下。廖雪峰老师的Git教程写的非常好,大家可以了解一下。Git教程

    windows:到git官网上下载,Download git,下载后会有一个Git Bash的命令行工具,以后就用这个工具来使用git。

    linux:对linux来说实在是太简单了,因为最早的git就是在linux上编写的,只需要一行代码

    sudo apt-get install git
    

    安装好后,用git --version 来查看一下版本

    2. 安装nodejs

    Hexo是基于nodeJS编写的,所以需要安装一下nodeJs和里面的npm工具。

    windows:nodejs选择LTS版本就行了。

    linux:

    sudo apt-get install nodejs
    sudo apt-get install npm
    

    安装完后,打开命令行

    node -v
    npm -v
    

    检查一下有没有安装成功

    顺便说一下,windows在git安装完后,就可以直接使用git bash来敲命令行了,不用自带的cmd,cmd有点难用。

    3. 安装hexo

    前面git和nodejs安装好后,就可以安装hexo了,你可以先创建一个文件夹blog,然后cd到这个文件夹下(或者在这个文件夹下直接右键git bash打开)。

    输入命令

    npm install -g hexo-cli
    

    依旧用hexo -v查看一下版本

    至此就全部安装完了。

    接下来初始化一下hexo

    hexo init myblog
    

    这个myblog可以自己取什么名字都行,然后

    cd myblog //进入这个myblog文件夹
    npm install
    

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

    • node_modules: 依赖包
    • public:存放生成的页面
    • scaffolds:生成文章的一些模板
    • source:用来存放你的文章
    • themes:主题
    • ** _config.yml: 博客的配置文件**
    hexo g
    hexo server
    

    打开hexo的服务,在浏览器输入localhost:4000就可以看到你生成的博客了。

    大概长这样:

    使用ctrl+c可以把服务关掉。

    4. GitHub创建个人仓库

    首先,你先要有一个GitHub账户,去注册一个吧。

    注册完登录后,在GitHub.com中看到一个New repository,新建仓库

    创建一个和你用户名相同的仓库,后面加.github.io,只有这样,将来要部署到GitHub page的时候,才会被识别,也就是xxxx.github.io,其中xxx就是你注册GitHub的用户名。我这里是已经建过了。

    点击create repository。

    5. 生成SSH添加到GitHub

    回到你的git bash中,

    git config --global user.name "yourname"
    git config --global user.email "youremail"
    

    这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

    可以用以下两条,检查一下你有没有输对

    git config user.name
    git config user.email
    

    然后创建SSH,一路回车

    ssh-keygen -t rsa -C "youremail"
    

    这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

    ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。

    而后在GitHub的setting中,找到SSH keys的设置选项,点击New SSH key
    把你的id_rsa.pub里面的信息复制进去。

    在gitbash中,查看是否成功

    ssh -T git@github.com
    

    6. 将hexo部署到GitHub

    这一步,我们就可以将hexo和GitHub关联起来,也就是将hexo生成的文章部署到GitHub上,打开站点配置文件 _config.yml,翻到最后,修改为
    YourgithubName就是你的GitHub账户

    deploy:
      type: git
      repo: https://github.com/YourgithubName/YourgithubName.github.io.git
      branch: master
    

    这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

    npm install hexo-deployer-git --save
    

    然后

    hexo clean
    hexo generate
    hexo deploy
    

    其中 hexo clean清除了你之前生成的东西,也可以不加。
    hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写
    hexo deploy 部署文章,可以用hexo d缩写

    注意deploy时可能要你输入username和password。

    得到下图就说明部署成功了,过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了!!

    7. 设置个人域名

    现在你的个人网站的地址是 yourname.github.io,如果觉得这个网址逼格不太够,这就需要你设置个人域名了。但是需要花钱。

    注册一个阿里云账户,在阿里云上买一个域名,我买的是 fangzh.top,各个后缀的价格不太一样,比如最广泛的.com就比较贵,看个人喜好咯。

    你需要先去进行实名认证,然后在域名控制台中,看到你购买的域名。

    解析进去,添加解析。

    其中,192.30.252.153 和 192.30.252.154 是GitHub的服务器地址。
    注意,解析线路选择默认,不要像我一样选境外。这个境外是后面来做国内外分流用的,在后面的博客中会讲到。记得现在选择默认!!

    登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名fangzh.top

    然后在你的博客文件source中创建一个名为CNAME文件,不要后缀。写上你的域名。

    最后,在gitbash中,输入

    hexo clean
    hexo g
    hexo d
    

    过不了多久,再打开你的浏览器,输入你自己的域名,就可以看到搭建的网站啦!

    接下来你就可以正式开始写文章了。

    hexo new newpapername
    

    然后在source/_post中打开markdown文件,就可以开始编辑了。当你写完的时候,再

    hexo clean
    hexo g
    hexo d
    

    就可以看到更新了。

    第二部分

    hexo的基本配置,更换主题,实现多终端工作,以及在coding page部署实现国内外分流。

    1. hexo基本配置

    在文件根目录下的_config.yml,就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。

    网站

    参数描述
    title网站标题
    subtitle网站副标题
    description网站描述
    author您的名字
    language网站使用的语言
    timezone网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC

    其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

    网址

    参数描述
    url网址
    root网站根目录
    permalink文章的 永久链接 格式
    permalink_defaults永久链接中各部分的默认值

    在这里,你需要把url改成你的网站域名。

    permalink,也就是你生成某个文章时的那个链接格式。

    比如我新建一个文章叫temp.md,那么这个时候他自动生成的地址就是http://yoursite.com/2018/09/05/temp

    以下是官方给出的示例,关于链接的变量还有很多,需要的可以去官网上查找 永久链接

    参数结果
    :year/:month/:day/:title/2013/07/14/hello-world
    :year-:month-:day-:title.html2013-07-14-hello-world.html
    :category/:titlefoo/bar/hello-world

    再往下翻,中间这些都默认就好了。

    theme: landscape
    
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: <repository url>
      branch: [branch]
    
    

    theme就是选择什么主题,也就是在theme这个文件夹下,在官网上有很多个主题,默认给你安装的是lanscape这个主题。当你需要更换主题时,在官网上下载,把主题的文件放在theme文件夹下,再修改这个参数就可以了。

    接下来这个deploy就是网站的部署的,repo就是仓库(Repository)的简写。branch选择仓库的哪个分支。这个在之前进行github page部署的时候已经修改过了,不再赘述。而这个在后面进行双平台部署的时候会再次用到。

    Front-matter

    Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说:

    title: Hello World
    date: 2013/7/13 20:46:25
    ---
    

    下是预先定义的参数,您可在模板中使用这些参数值并加以利用。

    参数描述
    layout布局
    title标题
    date建立日期
    updated更新日期
    comments开启文章的评论功能
    tags标签(不适用于分页)
    categories分类(不适用于分页)
    permalink覆盖文章网址

    其中,分类和标签需要区别一下,分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。

    categories:
    - Diary
    tags:
    - PS3
    - Games
    

    layout(布局)

    当你每一次使用代码

    hexo new paper
    

    它其实默认使用的是post这个布局,也就是在source文件夹下的_post里面。

    Hexo 有三种默认布局:postpagedraft,它们分别对应不同的路径,而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

    布局路径
    postsource/_posts
    pagesource
    draftsource/_drafts

    而new这个命令其实是:

    hexo new [layout] <title>
    

    只不过这个layout默认是post罢了。

    page

    如果你想另起一页,那么可以使用

    hexo new page board
    

    系统会自动给你在source文件夹下创建一个board文件夹,以及board文件夹中的index.md,这样你访问的board对应的链接就是http://xxx.xxx/board

    draft

    draft是草稿的意思,也就是你如果想写文章,又不希望被看到,那么可以

    hexo new draft newpage
    

    这样会在source/_draft中新建一个newpage.md文件,如果你的草稿文件写的过程中,想要预览一下,那么可以使用

    hexo server --draft
    

    在本地端口中开启服务预览。

    如果你的草稿文件写完了,想要发表到post中,

    hexo publish draft newpage
    

    就会自动把newpage.md发送到post中。


    2. 更换主题

    到这一步,如果你觉得默认的landscape主题不好看,那么可以在官网的主题中,选择你喜欢的一个主题进行修改就可以啦。点这里

    这里有200多个主题可以选。不过最受欢迎的就是那么几个,比如NexT主题,非常的简洁好看,大多数人都选择这个,关于这个的教程也比较多。不过我选择的是hueman这个主题,好像是从WordPress移植过来的,展示效果如下:

    不管怎么样,至少是符合我个人的审美。

    直接在github链接上下载下来,然后放到theme文件夹下就行了,然后再在刚才说的配置文件中把theme换成那个主题文件夹的名字,它就会自动在theme文件夹中搜索你配置的主题。

    而后进入hueman这个文件夹,可以看到里面也有一个配置文件_config.xml,貌似它默认是_config.xml.example,把它复制一份,重命名为_config.xml就可以了。这个配置文件是修改你整个主题的配置文件。

    menu(菜单栏)

    也就是上面菜单栏上的这些东西。

    其中,About这个你是找不到网页的,因为你的文章中没有about这个东西。如果你想要的话,可以执行命令

    hexo new page about
    

    它就会在根目录下source文件夹中新建了一个about文件夹,以及index.md,在index.md中写上你想要写的东西,就可以在网站上展示出来了。

    如果你想要自己再自定义一个菜单栏的选项,那么就

    hexo new page yourdiy
    

    然后在主题配置文件的menu菜单栏添加一个 Yourdiy : /yourdiy,注意冒号后面要有空格,以及前面的空格要和menu中默认的保持整齐。然后在languages文件夹中,找到zh-CN.yml,在index中添加yourdiy: '中文意思'就可以显示中文了。

    customize(定制)

    在这里可以修改你的个人logo,默认是那个hueman,在source/css/images文件夹中放入自己要的logo,再改一下url的链接名字就可以了。

    favicon是网站中出现的那个小图标的icon,找一张你喜欢的logo,然后转换成ico格式,放在images文件夹下,配置一下路径就行。

    social_links ,可以显示你的社交链接,而且是有logo的。

    tips:

    在这里可以添加一个rss功能,也就是那个符号像wifi一样的东西。

    添加RSS

    1. 什么是RSS?

    RSS也就是订阅功能,你可以理解为类似与订阅公众号的功能,来订阅各种博客,杂志等等。

    2. 为什么要用RSS?

    就如同订阅公众号一样,你对某个公众号感兴趣,你总不可能一直时不时搜索这个公众号来看它的文章吧。博客也是一样,如果你喜欢某个博主,或者某个平台的内容,你可以通过RSS订阅它们,然后在RSS阅读器上可以实时推送这些消息。现在网上的垃圾消息太多了,如果你每一天都在看这些消息中度过,漫无目的的浏览,只会让你的时间一点一点的流逝,太不值得了。如果你关注的博主每次都发的消息都是精华,而且不是每一天十几条几十条的轰炸你,那么这个博主就值得你的关注,你就可以通过RSS订阅他。

    在我的理解中,如果你不想每天都被那些没有质量的消息轰炸,只想安安静静的关注几个博主,每天看一些有质量的内容也不用太多,那么RSS订阅值得你的拥有。

    3. 添加RSS功能

    先安装RSS插件

    npm i hexo-generator-feed
    

    而后在你整个项目的_config.yml中找到Extensions,添加:

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    #RSS订阅
    plugin:
    - hexo-generator-feed
    #Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20
    

    这个时候你的RSS链接就是 域名/atom.xml了。

    所以,在主题配置文件中的这个social links,开启RSS的页面功能,这样你网站上就有那个像wifi一样符号的RSS logo了,注意空格。

    rss: /atom.xml
    

    4. 如何关注RSS?

    首先,你需要一个RSS阅读器,在这里我推荐inoreader,宇宙第一RSS阅读器,而且中文支持的挺好。不过它没有PC端的程序,只有网页版,chrome上有插件。在官网上用google账号或者自己注册账号登录,就可以开始你的关注之旅了。

    每次需要关注某个博主时,就点开他的RSS链接,把链接复制到inoreader上,就能关注了,当然,如果是比较大众化的很厉害的博主,你直接搜名字也可以的,比如每个人都非常佩服的阮一峰大师,直接在阅读器上搜索阮一峰,应该就能出来了。

    我关注的比如,阮一峰的网络日志,月光博客,知乎精选等,都很不错。当然,还有我!!赶快关注我吧!你值得拥有:http://fangzh.top/atom.xml

    在安卓端,inoreader也有下载,不过因为国内google是登录不了的,你需要在inoreader官网上把你的密码修改了,然后就可以用账户名和密码登录了。

    在IOS端,没用过,好像是reader 3可以支持inoreader账户,还有个readon也不错,可以去试试。

    widgets(侧边栏)

    侧边栏的小标签,如果你想自己增加一个,比如我增加了一个联系方式,那么我把communication写在上面,在zh-CN.yml中的sidebar,添加communication: '中文'

    然后在hueman/layout/widget中添加一个communicaiton.ejs,填入模板:

    <% if (site.posts.length) { %>
        <div class="widget-wrap widget-list">
            <h3 class="widget-title"><%= __('sidebar.communiation') %></h3>
            <div class="widget">
                <!--这里添加你要写的内容-->
            </div>
        </div>
    <% } %>
    

    search(搜索框)

    默认搜索框是不能够用的,

    you need to install hexo-generator-json-content before using Insight Search

    它已经告诉你了,如果想要使用,就安装这个插件。

    comment(评论系统)

    这里的多数都是国外的,基本用不了。这个valine好像不错,还能统计文章阅读量,可以自己试一试,链接

    miscellaneous(其他)

    这里我就改了一个links,可以添加友链。注意空格要对!不然会报错!

    总结:

    整个主题看起来好像很复杂的样子,但是仔细捋一捋其实也比较流畅,

    • languages: 顾名思义
    • layout:布局文件,其实后期想要修改自定义网站上的东西,添加各种各样的信息,主要是在这里修改,其中comment是评论系统,common是常规的布局,最常修改的在这里面,比如修改页面headfooter的内容。
    • scripts:js脚本,暂时没什么用
    • source:里面放了一些css的样式,以及图片

    3. git分支进行多终端工作

    问题来了,如果你现在在自己的笔记本上写的博客,部署在了网站上,那么你在家里用台式机,或者实验室的台式机,发现你电脑里面没有博客的文件,或者要换电脑了,最后不知道怎么移动文件,怎么办?

    在这里我们就可以利用git的分支系统进行多终端工作了,这样每次打开不一样的电脑,只需要进行简单的配置和在github上把文件同步下来,就可以无缝操作了。

    机制

    机制是这样的,由于hexo d上传部署到github的其实是hexo编译后的文件,是用来生成网页的,不包含源文件。

    可以看到,并没有source等源文件在内

    也就是上传的是在本地目录里自动生成的.deploy_git里面。

    其他文件 ,包括我们写在source 里面的,和配置文件,主题文件,都没有上传到github

    所以可以利用git的分支管理,将源文件上传到github的另一个分支即可。

    上传分支

    首先,先在github上新建一个hexo分支,如图:

    然后在这个仓库的settings中,选择默认分支为hexo分支(这样每次同步的时候就不用指定分支,比较方便)。

    然后在本地的任意目录下,打开git bash,

    git clone git@github.com:ZJUFangzh/ZJUFangzh.github.io.git
    

    将其克隆到本地,因为默认分支已经设成了hexo,所以clone时只clone了hexo。

    接下来在克隆到本地的ZJUFangzh.github.io中,把除了.git 文件夹外的所有文件都删掉

    把之前我们写的博客源文件全部复制过来,除了.deploy_git。这里应该说一句,复制过来的源文件应该有一个.gitignore,用来忽略一些不需要的文件,如果没有的话,自己新建一个,在里面写上如下,表示这些类型文件不需要git:

    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    

    注意,如果你之前克隆过theme中的主题文件,那么应该把主题文件中的.git文件夹删掉,因为git不能嵌套上传,最好是显示隐藏文件,检查一下有没有,否则上传的时候会出错,导致你的主题文件无法上传,这样你的配置在别的电脑上就用不了了。

    而后

    git add .
    git commit –m "add branch"
    git push 
    

    这样就上传完了,可以去你的github上看一看hexo分支有没有上传上去,其中node_modulespublicdb.json已经被忽略掉了,没有关系,不需要上传的,因为在别的电脑上需要重新输入命令安装 。

    这样就上传完了。

    更换电脑操作

    一样的,跟之前的环境搭建一样,

    • 安装git
    sudo apt-get install git
    
    • 设置git全局邮箱和用户名
    git config --global user.name "yourgithubname"
    git config --global user.email "yourgithubemail"
    
    • 设置ssh key
    ssh-keygen -t rsa -C "youremail"
    #生成后填到github和coding上(有coding平台的话)
    #验证是否成功
    ssh -T git@github.com
    ssh -T git@git.coding.net #(有coding平台的话)
    
    • 安装nodejs
    sudo apt-get install nodejs
    sudo apt-get install npm
    
    • 安装hexo
    sudo npm install hexo-cli -g
    

    但是已经不需要初始化了,

    直接在任意文件夹下,

    git clone git@………………
    

    然后进入克隆到的文件夹:

    cd xxx.github.io
    npm install
    npm install hexo-deployer-git --save
    

    生成,部署:

    hexo g
    hexo d
    

    然后就可以开始写你的新博客了

    hexo new newpage
    

    Tips:

    1. 不要忘了,每次写完最好都把源文件上传一下
    git add .
    git commit –m "xxxx"
    git push 
    
    1. 如果是在已经编辑过的电脑上,已经有clone文件夹了,那么,每次只要和远端同步一下就行了
    git pull
    

    4. coding page上部署实现国内外分流

    之前我们已经把hexo托管在github了,但是github是国外的,而且百度的爬虫是不能够爬取github的,所以如果你希望你做的博客能够在百度引擎上被收录,而且想要更快的访问,那么可以在国内的coding page做一个托管,这样在国内访问就是coding page,国外就走github page。

    1. 申请coding账户,新建项目

    先申请一个账户,然后创建新的项目,这一步项目名称应该是随意的。

    2. 添加ssh key

    这一步跟github一样。

    添加后,检查一下是不是添加成功

    ssh -T git@git.coding.net
    

    3. 修改_config.yml

    hexo官方文档是这样的:

    deploy:
      type: git
      message: [message]
      repo:
        github: <repository url>,[branch]
        coding: <repository url>,[branch] 
    

    那么,我们只需要:

    deploy:
      type: git
      repo: 
        coding: git@git.coding.net:ZJUFangzh/ZJUFangzh.git,master
        github: git@github.com:ZJUFangzh/ZJUFangzh.github.io.git,master
    

    4. 部署

    保存一下,直接

    hexo g
    hexo d
    

    这样就可以在coding的项目上看到你部署的文件了。

    5. 开启coding pages服务,绑定域名

    如图:

    6. 阿里云添加解析

    这个时候就可以把之前github的解析改成境外,把coding的解析设为默认了。

    7. 去除coding page的跳转广告

    coding page的一个比较恶心人的地方就是,你只是银牌会员的话,访问会先跳转到一个广告,再到你自己的域名。那么它也给出了消除的办法。右上角切换到coding的旧版界面,默认新版是不行的。然后再来到pages服务这里。

    这里:

    只要你在页面上添加一行文字,写Hosted by Coding Pages,然后点下面的小勾勾,两个工作日内它就会审核通过了。

    <p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>
    

    我的选择是把这一行代码放在主题文件夹/layout/common/footer.ejs里面,也就是本来在页面中看到的页脚部分。

    当然,为了统一,我又在后面加上了and Github哈哈,可以不加。

    <p><span>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></span> and <span><a href="https://github.com" style="font-weight: bold">Github</a></span></p>
    

    这是最终加上去的代码。


    第三部分

    hexo添加各种功能,包括搜索的SEO,阅读量统计,访问量统计和评论系统等。

    本文参考了: visugar.com这里面说的很详细了。

    1. SEO优化

    推广是很麻烦的事情,怎么样别人才能知道我们呢,首先需要让搜索引擎收录你的这个网站,别人才能搜索的到。那么这就需要SEO优化了。

    SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

    百度seo

    刚建站的时候是没有搜索引擎收录我们的网站的。可以在搜索引擎中输入site:<域名>

    来查看一下。

    1. 登录百度站长平台添加网站

    登录百度站长平台,在站点管理中添加你自己的网站。

    验证网站有三种方式:文件验证、HTML标签验证、CNAME验证。

    第三种方式最简单,只要将它提供给你的那个xxxxx使用CNAME解析到xxx.baidu.com就可以了。也就是登录你的阿里云,把这个解析填进去就OK了。

    2. 提交链接

    我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎

    npm install hexo-generator-sitemap --save     
    npm install hexo-generator-baidu-sitemap --save
    

    这时候你需要在你的根目录下_config.xml中看看url有没有改成你自己的:

    重新部署后,就可以在public文件夹下看到生成的sitemap.xml和baidusitemap.xml了。

    然后就可以向百度提交你的站点地图了。

    这里建议使用自动提交。

    自动提交又分为三种:主动推送、自动推送、sitemap。

    可以三个一起提交不要紧,我选择的是后两种。

    • 自动推送:把百度生成的自动推送代码,放在主题文件/layout/common/head.ejs的适当位置,然后验证一下就可以了。
    • sitemap:把两个sitemap地址,提交上去,看到状态正常就OK了。

    ps: 百度收录比较慢,慢慢等个十天半个月再去site:<域名>看看有没有被收录。

    google的SEO

    流程一样,google更简单,而且收录更快,进入google站点地图,提交网站和sitemap.xml,就可以了。

    如果你这个域名在google这里出了问题,那你就提交 yourname.github.io,这个链接,效果是一样的。

    不出意外的话一天内google就能收录你的网站了。

    其他的搜索,如搜狗搜索,360搜索,流程是一样的,这里就不再赘述。

    2. 评论系统

    评论系统有很多,但是很多都是墙外的用不了,之前说过这个valine好像集成在hueman和next主题里面了,但是我还没有研究过,我看的是visugar这个博主用的来比力评论系统,感觉也还不错。

    来比力官网,注册好后,点击管理页面,在代码管理中找到安装代码:

    获取安装代码后,在主题的comment下新建一个文件放入刚刚那段代码,再找到article文件,找到如下代码,若没有则直接在footer后面添加即可。livebe即为刚刚所创文件名称。

    <%- partial('comment/livebe') %>
    

    然后可以自己设置一些东西:

    还可以设置评论提醒,这样别人评论你的时候就可以及时知道了。

    3. 添加百度统计

    百度统计可以在后台上看到你网站的访问数,浏览量,浏览链接分布等很重要的信息。所以添加百度统计能更有效的让你掌握你的网站情况。

    百度统计,注册一下,这里的账号好像和百度账号不是一起的。

    照样把代码复制到head.ejs文件中,然后再进行一下安装检查,半小时左右就可以在百度统计里面看到自己的网站信息了。

    4. 文章阅读量统计leanCloud

    leanCloud,进去后注册一下,进入后创建一个应用:

    存储中创建Class,命名为Counter,

    然后在设置页面看到你的应用Key,在主题的配置文件中:

    leancloud_visitors:
      enable: true
      app_id: 你的id
      app_key: 你的key
    

    article.ejs中适当的位置添加如下,这要看你让文章的阅读量统计显示在哪个地方了,

    阅读数量:<span id="<%= url_for(post.path) %>" class="leancloud_visitors" data-flag-title="<%- post.title %>"></span>次
    

    然后在footer.ejs的最后,添加:

    <script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
    <script>
        var APP_ID = '你的app id';
        var APP_KEY = '你的app key';
        AV.init({
            appId: APP_ID,
            appKey: APP_KEY
        });
        // 显示次数
        function showTime(Counter) {
            var query = new AV.Query("Counter");
            if($(".leancloud_visitors").length > 0){
                var url = $(".leancloud_visitors").attr('id').trim();
                // where field
                query.equalTo("words", url);
                // count
                query.count().then(function (number) {
                    // There are number instances of MyClass where words equals url.
                    $(document.getElementById(url)).text(number?  number : '--');
                }, function (error) {
                    // error is an instance of AVError.
                });
            }
        }
        // 追加pv
        function addCount(Counter) {
            var url = $(".leancloud_visitors").length > 0 ? $(".leancloud_visitors").attr('id').trim() : 'icafebolger.com';
            var Counter = AV.Object.extend("Counter");
            var query = new Counter;
            query.save({
                words: url
            }).then(function (object) {
            })
        }
        $(function () {
            var Counter = AV.Object.extend("Counter");
            addCount(Counter);
            showTime(Counter);
        });
    </script>
    

    重新部署后就可以了。

    5. 引入不蒜子访问量和访问人次统计

    不蒜子的添加非常非常方便,不蒜子

    footer.ejs中的合适位置,看你要显示在哪个地方,添加:

    <!--这一段是不蒜子的访问量统计代码-->
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次 &nbsp;   </span>
    <span id="busuanzi_container_site_uv">访客数<span id="busuanzi_value_site_uv"></span>人次</span>
    

    就可以了。

    总结

    到这里就基本做完了。其实都是参考别的博主的设置的,不一定仅限于hueman主题,其他主题的设置也是大体相同的,所以如果你希望设置别的主题,那么仔细看一下这个主题的代码结构,也能够把上边的功能添加进去。

    多看看别的博主的那些功能,如果有你能找到自己喜欢的功能,那么好好发动搜索技能,很快就能找到怎么做了。加油吧!

    展开全文
  • hexo插件:Hexo插件
  • hexo-theme-3-hexo 3-hexo 是为 制作的主题。三段式设计、方便。你可以点击: 查看效果 如果想要体验手机浏览效果,可以扫以下二维码: 配置及说明: 功能更新日志: —————————————— 关于主题: 极简...
  • Hexo是一个快速,简单,功能强大的博客框架,具有超快的生成速度,对Markdown的支持,一键式部署和高可伸缩性。 该项目是基于Hexo的一系列优点而开发的主题。 丰富的网站风格 丰富的主题配置 优化多媒体播放 出色的...
  • 这是一篇有关如何使用 Github Pages 和 Hexo 搭建属于自己独立博客的详尽教程,本人是软件工程专业本科生,目前只学习了C和C++编程语言,对网站开发的有关知识几乎为零,这也是我搭建好自己的博客之后写的第一篇博客...

    欢迎关注我的专栏:《个人博客搭建:Hexo+Github Pages》,从搭建到美化一条龙,帮你解决 Hexo 常见问题!

    推荐阅读:《Hexo 博客优化之博客美化系列(持续更新)》《Hexo 博客优化之实用功能添加系列(持续更新)》

    我的博客地址:https://www.itrhx.com/

    Hexo 交流群:924812033,有问题可以一起交流解决。



    ● 前言

    这是一篇有关如何使用 Github PagesHexo 搭建属于自己独立博客的详尽教程,本人是软件工程专业本科生,目前只学习了C和C++编程语言,对网站开发的有关知识几乎为零,这也是我搭建好自己的博客之后写的第一篇博客,刚开始搭建博客的时候自己也是网上各种百度,由于自己属于小白那种,历经了千辛万苦才弄好,所以借这个机会写一篇小白真正能看懂的博客搭建教程,教你一步一步走向成功的彼岸!

    推荐文章: 《我为什么写博客》 (By 知明所以)
          《为什么你应该(从现在开始就)写博客》 (By 刘未鹏 | Mind Hacks)

    ● 入门

    Github Pages

    Github Pages可以被认为是用户编写的、托管在github上的静态网页。使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。

    Hexo

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

    ● 安装 Node.js

    点击此处访问官网,按需下载相应版本,默认安装可以了

    注:本人在安装过程中出现了Warning 1909,无法创建快捷方式,这种情况很少出现,如果在安装过程中也有这种情况请参考百度文库(win10系统实测可行):《Win7安装程序警告1909无法创建快捷方式》

    ● 安装 Git

    点击此处访问官网,按需下载相应版本,默认安装即可
    参考资料:《如何在windows下安装GIT》  (By 俊雨廷休)
         《Pro Git(中文版)》

    • 检验Git是否安装成功

    同时按下 Win 键和 R 键打开运行窗口,输入 cmd ,然后输入以下命令,有相应版本信息显示则安装成功,若不正确可以卸载软件重新安装,此外若安装成功,在桌面右键鼠标,可以看到菜单里多了 Git GUI HereGit Bash Here两个选项,第一个是图形界面的Git操作,另一个是命令行

     $ git --version  
     $ node -v  
     $ npm -v
    

    ● 安装Hexo

    选择一个磁盘,新建一个文件夹,自己重命名文件夹(如:我的文件夹为:E\TRHX_Blog),博客相关文件将储存在此文件夹下,在该文件夹下右键鼠标,点击 Git Bash Here,输入以下 npm 命令即可安装,第一个命令表示安装 hexo,第二个命令表示安装 hexo 部署到 git page 的 deployer,如图所示即为安装成功

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

    • Hexo 初始化配置

    在刚才新建的文件夹里面再次新建一个 Hexo 文件夹(如:我的文件夹为:E\TRHX_Blog\Hexo),进入该 Hexo 文件夹右键鼠标,点击 Git Bash Here,输入以下命令,如图所示则安装成功

     $ hexo init
    

    Hexo 安装完成后,将会在指定文件夹中新建所需要的文件,Hexo 文件夹下的目录如下:

    ● 本地查看效果

    执行以下命令,执行完即可登录 http://localhost:4000/ 查看效果

     $ hexo generate  
     $ hexo server  
    

    显示以下信息说明操作成功:

     INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
    

    登录 http://localhost:4000/ 查看效果:

    ● 将博客部署到 Github Pages 上

    到目前为止,我们的本地博客就成功搭建了,但是现在我们只能通过本地连接查看博客,我们要做的是让其他人也能够访问我们的博客,这就需要我们将博客部署到Github Pages上

    • 注册 Github 账户

    点击此处访问 Github 官网,点击 Sign Up 注册账户

    • 创建项目代码库

    点击 New repository 开始创建,步骤及注意事项见下图:

    • 配置 SSH 密钥

    只有配置好 SSH 密钥后,我们才可以通过 git 操作实现本地代码库与 Github 代码库同步,在你第一次新建的文件夹里面(如:我的文件夹为:E\TRHX_BlogGit Bash Here 输入以下命令:

     $ ssh-keygen -t rsa -C "your email@example.com" 
     //引号里面填写你的邮箱地址,比如我的是tanrenhou@126.com
    

    之后会出现:

     Generating public/private rsa key pair.  
     Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):  
     //到这里可以直接回车将密钥按默认文件进行存储
    

    然后会出现:

     Enter passphrase (empty for no passphrase):  
     //这里是要你输入密码,其实不需要输什么密码,直接回车就行 
     Enter same passphrase again:  
    

    接下来屏幕会显示:

     Your identification has been saved in /c/Users/you/.ssh/id_rsa.  
     Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.  
     The key fingerprint is:  
     这里是各种字母数字组成的字符串,结尾是你的邮箱  
     The key's randomart image is:  
     这里也是各种字母数字符号组成的字符串  
    

    运行以下命令,将公钥的内容复制到系统粘贴板上

     $ clip < ~/.ssh/id_rsa.pub
    

    • 在 GitHub 账户中添加你的公钥

    ① 登陆 GitHub,进入 Settings

    ② 点击 SSH and GPG Keys

    ③ 选择 New SSH key

    ④ 粘贴密钥:

    • 测试

    输入以下命令:注意:git@github.com不要做任何更改!

     $ ssh -T git@github.com
    

    之后会显示:

    输入 yes 后会显示:

    此时表示设置正确

    • 配置 Git 个人信息

    Git 会根据用户的名字和邮箱来记录提交,GitHub 也是用这些信息来做权限的处理,输入以下命令进行个人信息的设置,把名称和邮箱替换成你自己的,名字可以不是 GitHub 的昵称,但为了方便记忆,建议与 GitHub 一致

     $ git config --global user.name "此处填你的用户名"  
     $ git config --global user.email  "此处填你的邮箱"
    

    到此为止 SSH Key 配置成功,本机已成功连接到 Github

    ● 将本地的 Hexo 文件更新到 Github 的库中

    ① 登录 Github 打开自己的项目 your name.github.io

    ② 鼠标移到 Clone or download 按钮,选择 Use SSH

    ③ 一键复制地址

    ④ 打开你创建的 Hexo 文件夹(如:E:\TRHX_Blog\Hexo),右键用记事本(Notepad++或者VS code等都可以)打开该文件夹下的 _config.yml 文件

    ⑤ 按下图修改 _config.yml 文件并保存

    注意:github 默认分支变成了 main,所以下图中 branch 要改为 main!!!

    ⑥ 在 Hexo 文件夹下分别执行以下命令

     $ hexo g  
     $ hexo d
    

    或者直接执行

     $ hexo g -d
    

    执行完之后会让你输入你的 Github 的账号和密码,如果此时报以下错误,说明你的 deployer 没有安装成功

     ERROR Deployer not found: git
    

    需要执行以下命令再安装一次:

     npm install hexo-deployer-git --save
    

    再执行 hexo g -d,你的博客就会部署到 Github 上了

    ⑦ 访问博客

    你的博客地址:https://你的用户名.github.io,比如我的是:https://trhx.github.io ,现在每个人都可以通过此链接访问你的博客了

    ● 在博客上发表文章

    博客已经成功搭建了,但是我们该怎么写博客呢?

    ① 新建一个空文章,输入以下命令,会在项目 \Hexo\source\_posts 中生成 文章标题.md 文件,文章标题根据需要命名

     $ hexo n "文章标题"
    

    也可以直接在 \Hexo\source\_posts 目录下右键鼠标新建文本文档,改后缀为 .md 即可,这种方法比较方便

    ② 用编辑器编写文章

    md 全称 Markdown, Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,非常的简单实用,常用的标记符号屈指可数,几分钟即可学会, .md 文件可以使用支持 Markdown 语法的编辑器编辑,然后保存文件到 \Hexo\source\_posts 文件夹下即可

    推荐 Windows 上使用 MarkdownPad2 或者小书匠 编辑器,macOS 上使用 Mou 编辑器,Linux 上使用 Remarkable编辑器,Web 端上使用CSDN ,其他编辑器推荐可以参考我的另一篇文章:《最新主流 Markdown 编辑器推荐》

    文章标题,标签,分类,封面图片,摘要等,可以在 Front-matter 里面配置(Front-matter 是文件最上方以 — 分隔的区域,用于指定个别文件的变量,官方文档:https://hexo.io/zh-cn/docs/front-matter ),举个例子:

    ---
    layout: 页面布局(配合主题文档使用)
    title: 文章名称
    date: 文章日期
    comments: 文章是否开启评论
    photos: 文章封面图(仅部分主题支持)
    tags: 
      - 文章标签一
      - 文章标签二
    categories: 文章分类
    description: 文章描述,即要在首页显示的摘要(仅部分主题支持)
    ---
    
    这里是摘要
    
    <!-- more -->
    
    这里是正文
    
    注意:description 和 <!-- more --> 方式显示摘要二选一即可,部分主题不支持description,每个配置英文冒号后面要空一格,不同主题配置有所差异,具体要参考主题文档
    

    当我们用编辑器写好文章后,可以使用以下命令将其推送到服务器上

     $ hexo g  
     $ hexo d
    

    或者将两个命令合二为一输入以下命令:

     $ hexo d -g 
    

    现在访问你的博客就可以看见写好的文章啦!

    参考资料:《10款流行的Markdown编辑器》 (By xiaoxiao_engineer)
         《献给写作者的 Markdown 新手指南》 (By 简书)
         《认识与入门 Markdown》 (By Te_Lee)
         《markdown简明语法》 (By 不如)
         《markdown基本语法》 (By 高鸿祥)
         《Markdown 公式指导手册》 (By Harries)

    ● 为博客更换自己喜欢的主题

    博客也搭建好了,文章也会写了,但是!!!默认的主题并不喜欢怎么办?现在,我们就来为自己的博客更换自己喜欢的主题

    点击此处进入 Hexo 官网的主题专栏,我们可以看见有许多的主题供我们选择

    我们要做的就是把主题克隆过来,在此我们以主题 Aero-Dual 为例,点进去我们就可以看见该主题作者的博客,鼠标滑到底,我们可以看见 Theme By Levblanc 的字样(其他主题类似),点击作者 Levblanc ,页面就会跳转到该主题所有的相关文件在 Github 上的地址,复制该地址


    再打开 Hexo 文件夹下的 themes 目录(如:E:\TRHX_Blog\Hexo\themes),右键 Git Bash Here,输入以下命令:

     $ git clone 此处填写你刚才复制的主题地址
    

    比如要安装 Aero-Dual 主题,则输入命令:

     $ git clone https://github.com/levblanc/hexo-theme-aero-dual
    

    等待下载完成后即可在 themes 目录下生成 hexo-theme-aero-dual 文件夹,然后打开 Hexo 文件夹下的配置文件 _config.yml ,找到关键字 theme,修改参数为:theme:hexo-theme-aero-dual (其他主题修改成相应名称即可),再次注意冒号后面有一个空格!

    返回 Hexo 目录,右键 Git Bash Here ,输入以下命令开始部署主题:

     $ hexo g   
     $ hexo s
    

    此时打开浏览器,访问 http://localhost:4000/ 就可看见我们的主题已经更换了,如果感觉效果满意,我们就可以把它部署到Github上了

    打开 Hexo 文件夹,右键 Git Bash Here ,输入以下命令:

     $ hexo clean  
     //该命令的作用是清除缓存,若不输入此命令,服务器有可能更新不了主题
     $ hexo g -d
    

    此时访问自己的博客即可看见更换后的主题,但我们仍然需要对主题的相关配置进行修改,比如网站标题,图标等等,Hexo 中有两份主要的配置文件,名称都是 _config.yml ,它们均是用于站点配置使用的。其中,一份位于站点根目录下(比如我的:E:\TRHX_Blog\Hexo\_config.yml),主要包含 Hexo 本身整站的配置;另一份位于主题目录下(比如我的:E:\TRHX_Blog\Hexo\themes\hexo-theme-aero-dual\_config.yml),这份配置由主题作者提供,主要用于配置主题相关的选项,一般 _config.yml 文件里都有相关注释,按需修改即可

    参考资料:《有哪些好看的 Hexo 主题?》 (知乎)
         《Hexo | 配置》 (Hexo官方文档)
         《hexo常用命令笔记》 (By 小弟调调)

    ● 为你的 Hexo 博客配置个性域名

    本人在配置域名的时候问题百出,百度的各种方法都不管用,打开网站总是 404,可能是我太笨了  o(╥﹏╥)o ,不过好在后来终于解决了这个问题

    首先我们要购买域名,阿里云腾讯云都可以,也不贵,一年几十块钱,最便宜几块钱也能买到,以阿里云为例,我购买的域名是 itrhx.com,(最开始买的是trhx.top),购买过程就不赘述了,选择阿里云的解析平台,来到阿里云的管理控制台,点击进入域名解析列表或者直接点击域名后面的解析

    方法一:点击添加记录,需要添加两个记录,两个记录类型都是 CNAME ,第一个主机记录为 @ ,第二个主机记录为 www,记录值都是填你自己的博客地址(比如我的是:trhx.github.io),保存之后域名解析就完成了!(主机记录有 @ 和 www 能保证URL加不加 www 都能访问)

    方法二:两个记录类型为 A ,第一个主机记录为 @ ,第二个主机记录为 www,记录值都为博客的 IP 地址,IP 地址可以 cmd 中输入 ping 你的博客地址 获得(比如我的:ping trhx.github.io),保存之后域名解析就完成了!

    有关解析记录类型的区别可以参考《域名解析中A记录、CNAME、MX记录、NS记录的区别和联系》

    为了使 GitHub 接收我们的域名,还需要在博客的根目录下添加一个名为 CNAME 的文件(注意不要加.txt,没有任何后缀名!),这个文件放到 Hexo 文件夹的 source 里面,(比如我的是:E:\TRHX_Blog\Hexo\source),文件里面填写你的域名(加不加www都行),比如要填写我的域名,文件里面就写:www.itrhx.com 或者 itrhx.com,经过以上操作,别人就可以通过 www.itrhx.comitrhx.comtrhx.github.io 三个当中任意一个访问我的博客了!你的也一样!

    有关加不加www的问题有以下区别:

    如果你填写的是没有www的,比如 itrhx.com,那么无论是访问 https://www.itrhx.com 还是 https://itrhx.com ,都会自动跳转到 https://itrhx.com

    如果你填写的是带www的,比如 www.itrhx.com ,那么无论是访问 https://www.itrhx.com 还是 https://itrhx.com ,都会自动跳转到 https://www.itrhx.com

    如果你在其他平台购买域名,或者选择 DNSPod 等其他域名解析,操作方法大同小异,遇到问题可自行百度解决!

    参考资料:《推荐几家域名注册服务商》 (By Jelly Bool)
         《盘点十大免费DNS域名解析服务:稳定、可靠》

    ● 博客美化和实用功能的添加

    有关博客后期的美化、实用功能的添加,可以参考我的另外两篇文章:
    《Hexo 博客优化之博客美化》
    《Hexo 博客优化之实用功能添加》

    ● 结语

    一顿操作下来虽然有点儿累,但看见拥有了自己的博客还是非常有成就感的,人生就是需要折腾,那么现在就开始你的创作之旅吧!文章的不断积累,你会从中受益很多的!另外,这是一篇小白写的适用于小白的博客搭建教程,比较详细,有这方面基础的可以百度有简略一点儿的教程,文中如有错误还请大佬指出改正!文中涉及参考资料如有侵权请联系我删除!

    展开全文
  • hexo-blog:hexo博客-源码

    2021-03-15 02:03:07
    hexo-blog:hexo博客
  • hexo-blog:Hexo博客-源码

    2021-03-12 14:35:55
    hexo-blog:Hexo博客
  • hexo:我的hexo博客-源码

    2021-03-10 11:50:16
    hexo:我的hexo博客
  • hexo-notes:hexo模版
  • hexo-cli Hexo 的命令行界面。 安装 $ npm install hexo-cli -g 发展 Fork这个项目 $ git clone https://github.com/user/hexo-cli --recurse-submodules && cd hexo-cli/ $ npm install $ npm test 执照
  • hexo-pwa让Hexo网站具有这两种功能。 -用户可以将您的网站添加到移动主屏幕 -使您的网站可以离线使用 安装 $ npm install --save hexo-pwa 选件 您可以在_config.yml配置此插件。 pwa : manifest : path : /...
  • netxpert-hexo hexo 降价博客
  • hexo码云博客运行hexo clean,hexo g,hexo d等命令时报错 报错信息 ERROR Cannot find module 'hexo' from 'F:\hexo' ERROR Local hexo loading failed in F:\hexo ERROR Try running: 'rm -rf node_modules &...
  • Hexo桌面客户端 我的博客: : Hexo: : 主页: : Electron AppCenter: ://electronjs.org/apps/hexo-client QQ群 欢迎加入HexoClient用户群交流。 QQ群号:618213781 QQ群二维码 功能简介 文章添加 文章...
  • hexo-origin:hexo博客源码
  • hexo:hexo构建博客工程源码
  • hexo:收集hexo主题-源码

    2021-05-18 21:21:08
    本项目用于收集个人认为好看的hexo主题 项目地址
  • Xups 主题安装及 Hexo 使用教程 主题的一些特性 扁平。思路源于大前端 WordPress 主题。 自带博客评论系统。博客主题自带评论系统,基于 github issues 实现,了解更多请点击。 使用指引 安装hexo npm i hexo-cli -g...
  • Hexo Typora插件 六o :red_heart: Typora monorepo 配套 解决使用post_asset_folder: true时出现的路径问题post_asset_folder: true 执照 麻省理工学院
  • 然后将文件hexo/_config.yml的属性theme修改为theme: pure 更新主题 执行以下命令以更新主题。 cd themes/pure git pull 安装插件 十六进制字数 npm install hexo-wordcount --save hexo-generator-json-...
  • 十六进制 hexo博客源码
  • 项目介绍 HEXO博客系统
  • hexo_blog hexo 博客的测试
  • 己酮 hexo博客所有源文件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,677
精华内容 15,870
关键字:

hexo