Hexo deploy

[TOC]

jekyll vs hugo vs hexo

https://www.techiediaries.com/jekyll-hugo-hexo/

Hexo

https://hexo.io/docs/

https://blog.peiyingchi.com/2017/03/11/hexo-user-notes/

https://zhuanlan.zhihu.com/p/26877716

https://linlif.github.io/2017/05/27/Hexo%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5-%E6%B7%BB%E5%8A%A0%E5%88%86%E7%B1%BB%E5%8F%8A%E6%A0%87%E7%AD%BE/

https://blog.csdn.net/Likianta/article/details/78943573

https://lanjingling.github.io/2015/09/24/use-of-hexo-2/

https://blog.csdn.net/kunkun5love/article/details/79130956

http://theme-next.iissnan.com/theme-settings.html#categories-page

Hexo常见问题解决方案

https://xuanwo.io/2014/08/14/hexo-usual-problem/

theme-next

https://github.com/theme-next/hexo-theme-next

https://github.com/theme-next/hexo-theme-next/blob/master/docs/INSTALLATION.md

blog style

https://github.com/iissnan/hexo-theme-next/issues/119

https://blog.csdn.net/dataiyangu/article/details/85057957

https://www.oncecoupled.com/sidebar-show-mobile/

https://io-oi.me/tech/hexo-next-optimization.html

enable sidebar on mobile移动设备上开启侧栏

https://github.com/iissnan/hexo-theme-next/pull/1717

1
2
3
4
5
6
7
$ cd hexo
$ ls
_config.yml node_modules package.json public scaffolds source themes

~/blog/themes on  master! ⌚ 16:59:21
$ ls
landscape next next-reloaded

[yaml]~/blog/_config.yml

1
2
3
##Themes: https://hexo.io/themes/

theme: next-reloaded

Set theme in main Hexo root config _config.yml file:

1
theme: next

移动端显示 back-to-top 按钮和侧栏

文件位置:~/blog/themes/next/_config.yml

1
2
> `# Enable sidebar on narrow viewonmobile: true`
>
1
2
3
4
5
6
7
8
9
10
find . -name "*config.yml" -type f
./next/_config.yml

./node_modules/hexo/node_modules/hexo-cli/assets/_config.yml
./node_modules/hexo/node_modules/hexo-cli/assets/themes/landscape/_config.yml

./_config.yml
./themes/next/_config.yml
./themes/next-reloaded/_config.yml
./themes/landscape/_config.yml

hexo images 统一的图片存放地

https://hexo.io/docs/asset-folders.html

Global Asset Folder

Assets are non-post files in the source folder, such as images, CSS or JavaScript files. For instance, If you are only going to have a few images in the Hexo project, then the easiest way is to keep them in a source/images directory. Then, you can access them using something like ![](/images/image.jpg)

插件地址

https://hexo.io/plugins/index.html

  • hexo-filter-plantuml

    Generate PlantUML Diagram with markdown code fence

  • hexo-filter-sequence

    Generate UML sequence diagrams for Hexo.

  • hexo-tag-plantuml

    hexo-tag-plantuml is a tag plugin for Hexo. It can work with plantuml to draw uml.

插件的安装

npm install -g hexo-cli

npm install hexo-deployer-git –save

npm install hexo-generator-feed

npm install hexo-generator-sitemap

npm install hexo-generator-sitemap –save

npm install hexo-generator-feed –save

npm install hexo-generator-baidu-sitemap –save

npm install hexo-browsersync –save

npm install –save-dev hexo-typora-image

1
[npm install --save hexo-filter-flowchart](https://www.npmjs.com/package/hexo-filter-flowchart)

hexo install:

$ npm install -g hexo-cli

#test

$ hexo

config your blog: https://hexo.io/docs/configuration.html
_config.yml

language: zh-CN
timezone: Asia/Shanghai
note: Asia\Shanghai cause error: TypeError: Cannot read property ‘offset’ of null
generate blog: https://hexo.io/docs/commands.html

Deployment

Hexo provides a fast and easy deployment strategy. You only need one single command to deploy your site to your servers.
$ hexo deploy
Before your first deployment, you will have to modify some settings in _config.yml. A valid deployment setting must have a type field. For example:
Git
Install hexo-deployer-git.
$ npm install hexo-deployer-git –save
Edit settings.
deploy:
type: git
repo: git@github.com:cuiwm/cuiwm.github.io.git #
branch: master
message: [message]

同时托管到github和coding
hexo干货系列:(四)将hexo博客同时托管到github和coding

image-20180801151622486

configure domain

configure your domain dns setting in your dns isp site
$ echo “91kuaile.cn” > source/CNAME
reference:

$npm install hexo-generator-feed
$npm install hexo-generator-sitemap

#插件
插件是配置是在hexo 目录下的_config.yml ,不是theme下的next下的_config.yml

Extensions

Plugins:

  • hexo-generator-feed
  • hexo-generator-sitemap

    Feed Atom

    feed:
    type: atom
    path: atom.xml
    limit: 20

    sitemap

    sitemap:
    path: sitemap.xml

Reference:

$ hexo new page “tags”
INFO Created: ~/blog/source/tags/index.md

$ hexo new draft “My First Blog Post”
creates -> ./source/_drafts/My-First-Blog-Post.md

The stuff between the dashes — at the top of the markdown file is called “front-matter”. It is metadata that is used by Hexo and the active theme. See the Hexo documentation on Front-Matter for more information.
Ensure that your Markdown content for the page sits BELOW the front-matter dashes — or the content will not display (and you’ll likely see a YAMLException error in the server output).

Saving changes to your Markdown files will be automatically detected by the running hexo server and regenerated as static HTML files, but you must refresh the browser to view the changes.

If you dislike having to manually refresh the browser each time, the hexo-livereload or hexo-browsersync plugins can do it automatically.

To install the hexo-browsersync plugin (my personal favorite):

$ npm install hexo-browsersync –save

$ hexo server –draft –open # restart the server

#Inserting images

Images and other asset files can be placed in subdirectories under the ./source/ folder.
Edit your original post, inserting a markdown image link with a reference to /images/Ateam.jpg:

Assets can also be organized in folders for each post. It requires enabling the post_asset_folder: true setting in _config.yml and some knowledge of its relative path referencing behavior. See the Hexo documentation on Asset Folders for more information.

-–
title: My First Blog Post
tags:
-–
## Hello there
This is some content.

!I love it when a plan comes together.

打开post_assset_folder标记,导致在post中的相对路径下的图片不能正确显示。解决y方法:采用 asset_img语法,见下文:
_config.yml
post_asset_folder: true
These enable you to reference your assets more easily in posts:

For example, with post asset folders enabled, if you place an image example.jpg into your asset folder, it will not appear on the index page if you reference it using a relative path with regular ![](/example.jpg) markdown syntax (however, it will work as expected in the post itself).

The correct way to reference the image will thus be to use tag plugin syntax rather than markdown:

##Publishing drafts

When it’s time to move the draft to a “live” post for the world to see, use the hexo publish command:

$ hexo publish My-First-Blog-Post
A few things will happen when this command is run:

The markdown file My-First-Blog-Post.md moves from ./source/_drafts/ to ./source/_posts.
The file’s “front-matter” changes to include a publish date:

-–
title: My First Blog Post
date: 2015-12-30 00:53:15 # <-
tags:
-–

categories vs tags
Finally, prepare the entire site for deployment. Run the hexo generate command:

$ hexo generate # generates -> ./public/

Everything that is required to run the website will be placed inside the ./public folder. You are all set to take this folder and transfer it to your public webserver or CDN.

http://rogerdudler.github.io/git-guide/
http://jr0cket.co.uk/hexo/managing-hexo-website-content-with-git-and-github.html
https://hexo.io/docs/configuration.html
https://hexo.io/docs/deployment.html
https://hexo.io/docs/tag-plugins.html
https://hexo.io/plugins/
http://jr0cket.co.uk/hexo/hexo-theme-simple-changes.html
https://hexo.io/themes/
https://hexo.io/docs/themes.html
https://hexo.io/docs/migration.html

改变生成的网页路径格式

https://hexo.io/zh-cn/docs/permalinks#%E5%8F%98%E9%87%8F

#Refrence:
[1]Getting Started with the Hexo Blogging Framework