Maison > interface Web > tutoriel HTML > le corps du texte

Tutoriel super détaillé sur la façon de créer un blog avec Hexo + GitHub Pages

零下一度
Libérer: 2017-06-24 14:07:30
original
2275 Les gens l'ont consulté

Avant-propos : Le blogueur est actuellement un junior à l'université et un passionné du Web front-end. L’avantage du blogging n’est pas d’écrire pour le plaisir d’écrire, mais d’enregistrer des pensées. Ne pensez pas à ce que cela peut vous apporter, mais à ce que vous en retirez.

J'ai eu du temps libre récemment, j'ai donc créé un blog en me référant à divers tutoriels sur Internet. Enregistrez maintenant le processus complet de création d'un blog avec Hexo + GitHub Pages :

Adresse personnelle du blog :

À propos du processus :
1. js
2. Créez un environnement Git
3. Enregistrement et configuration de GitHub
4 Installez et configurez Hexo
5. Associez Hexo aux pages GitHub
6. nom de domaine
7 .Opérations courantes d'Hexo
8. Conclusion

Construire un environnement Node.js

Pourquoi devrions-nous créer un environnement Node.js ? - Parce que le système de blog Hexo est écrit sur la base de Node.js

Node.js est un environnement d'exécution JavaScript basé sur le moteur Chrome V8, qui peut interpréter et exécuter du code JS dans un environnement sans navigateur .

Sur le site officiel de Node.js : Téléchargez le package d'installation v6.10.3 LTS

Conservez simplement les paramètres par défaut, cliquez sur Suivant et l'installation sera bientôt terminée.

Ouvrez ensuite l'invite de commande et saisissez node -v, npm -v Si le numéro de version apparaît, cela signifie que l'environnement Node.js est configuré avec succès et que la première étape est terminée ! ! !

Créer un environnement Git

Pourquoi devriez-vous créer un environnement Git ? - Parce que les pages Web et les articles locaux doivent être soumis à GitHub.

Git est un système de contrôle de version distribué gratuit et open source pour une gestion agile et efficace de tout projet, petit ou grand.

Sur le site officiel de Git : Téléchargez le package d'installation Git-2.13.0-64-bit.exe

Cliquez droit sur le bureau, ouvrez Git Bush Here, saisissez git --version, si le numéro de version apparaît, cela signifie Git La configuration de l'environnement est réussie et la deuxième étape est terminée ! ! !

Inscription et configuration de GitHub

GitHub est une plateforme d'hébergement de code Parce qu'elle ne prend en charge que Git comme seul format de référentiel pour l'hébergement, elle s'appelle GitHub.

Inscription Github :

Tutoriel super détaillé sur la façon de créer un blog avec Hexo + GitHub Pages

Créer un référentiel : Nom du référentiel Utilisez votre propre nom d'utilisateur, règles de nom du référentiel :

Remarque : yourname doit être votre nom d'utilisateur.

yourname/yourname.github.io
Copier après la connexion

Visitez votrenom.github.io Si vous pouvez y accéder normalement, la configuration de Github est terminée.

La configuration de l'environnement pertinente pour la création du blog Hexo est terminée. Commençons par expliquer les opérations associées de Hexo

Installation et configuration de Hexo

Hexo est un outil rapide, blog simple et efficace Le framework utilise Markdown (ou d'autres moteurs de rendu) pour analyser les articles et générer des pages Web statiques avec de beaux thèmes en quelques secondes.

Je vous recommande fortement de consacrer 20 minutes à lire la documentation officielle d'Hexo : https://hexo.io/zh-cn/

Utilisez npm pour installer Hexo : Entrez

npm install hexo-cli -g
Copier après la connexion

dans la ligne de commande et vous verrez l'Tutoriel super détaillé sur la façon de créer un blog avec Hexo + GitHub Pages ci-dessous. Vous verrez peut-être un WARN, mais ne vous inquiétez pas, cela n'affectera pas votre. utilisation normale.

Vérifier la version d'Hexo

hexo version
Copier après la connexion

Installer Hexo Une fois terminé, veuillez exécuter la commande suivante pour initialiser Hexo, Remplacez le nom d'utilisateur par le vôtre et Hexo créera les fichiers requis dans le dossier spécifié.

hexo init bxm0927.github.io

cd bxm0927.github.io

npm install
Copier après la connexion

Une fois la création terminée, le répertoire du dossier spécifié est le suivant :

.
├── .deploy         #需要部署的文件
├── node_modules    #Hexo插件
├── public          #生成的静态网页文件
├── scaffolds       #模板
├── source          #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts       #草稿
| └── _posts        #文章
├── themes          #主题
├── _config.yml     #全局配置文件
└── package.json    #npm 依赖等
Copier après la connexion

Exécutez le service Hexo local

hexo server
或者
hexo s
Copier après la connexion

Votre site Web sera lancé sous http://localhost:4000. Si http://localhost:4000 est accessible normalement, cela signifie que le blog local Hexo a été créé. Il est uniquement local et ne peut pas être vu par les autres. Ensuite, nous allons déployer sur Github.

Remarque 1 : Lors de l'exécution du serveur hexo, il indique que la commande est introuvable

Solution : Le serveur est séparé après Hexo 3.0 Maintenant, vous devez installer le serveur. La commande d'installation est la suivante :

sudo npm install hexo-server
或者
npm install hexo -server --save
Copier après la connexion

Associer Hexo aux pages GitHub

Comment connecter le projet git local au github distant ? Générez des clés SSH avec des clés SSH

Entrez votre propre adresse e-mail

ssh-keygen -t rsa -C "80583600@qq.com"
Copier après la connexion

在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入,我们按回车不设置密码。

添加 SSH Key 到 GitHub

打开 C:\Users\bxm09\.ssh\id_rsa.pub,此文件里面内容为刚才生成的密钥,准确的复制这个文件的内容,粘贴到  的 new SSH key

测试

可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:

ssh -T git@github.com
Copier après la connexion

如果是下面的反馈:

The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要紧张,输入yes就好,然后会看到:

Hi aierui! You've successfully authenticated, but GitHub does not provide shell access.
Copier après la connexion

配置Git个人信息

现在你已经可以通过 SSH 链接到 GitHub 了,还有一些个人信息需要完善的。
Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的。

git config --global user.name "bxm0927"
git config --global user.email "80583600@qq.com"
Copier après la connexion

配置 Deployment

_config.yml文件中,找到Deployment,然后按照如下修改,用户名改成你的:

需要注意的是:冒号后面记得空一格!

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:bxm0927/bxm0927.github.io.git
  branch: master
Copier après la connexion

本地文件提交到 GitHub Pages

// 删除旧的 public 文件
hexo clean

// 生成新的 public 文件
hexo generate
或者
hexo g

// 开始部署
hexo deploye
或者
hexo d
Copier après la connexion

在浏览器中输入 https://bxm0927.github.io (用户名改成你的)看到了 Hexo 与 GitHub Pages 已经成功关联了,哇哇哇哇哇哇,开心死你了,不要忘了回来给我点赞哟 ~

注意1:若上面操作失败,则需要提前安装一个扩展:

npm install hexo-deployer-git --save
Copier après la connexion

注意2:如果在执行 hexo d 后,出现 error deployer not found:github 的错误(如下),则是因为没有设置好 public key 所致,重新详细设置即可。

Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.

注意3:怎么避免 .md 文件被解析?

Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中,在执行hexo deploy时将其复制到.deploy文件夹中。Github的版本库通常建议同时附上README.md说明文件,但是hexo默认情况下会把所有md文件解析成html文件,所以即使你在线生成了 README. md,它也会在你下一次部署时被删去。怎么解决呢?

在执行hexo deploy前把在本地写好的README.md文件复制到.deploy文件夹中,再去执行hexo deploy。

GitHub Pages 地址解析到个人域名

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服 务,站点可以被免费托管在 Github 上,你可以选择使用 Github Pages 默 认提供的域名 github.io 或者自定义域名来发布站点。

看着博客的域名是二级域名,总有一种寄人篱下的感觉,为了让这个小窝看起来更加正式,我在阿里云上买了一个域名,打算将博客绑定自己的域名。

进行该绑定过程,其实就是一个重定向的过程。

在 GitHub 仓库的根目录下建立一个 CNAME 的文本文件(注意:没有扩展名),文件里面只能输入一个你的域名,不能加http://

www.lovebxm.com
Copier après la connexion

注意:CNAME 一定是在你 Github 项目的 master 根目录下

进入阿里云域名解析地址,添加解析:

  1. 记录类型选择CNAME

  2. 主机记录填www

  3. 解析线路选择默认

  4. 记录值填yourname.github.io

  5. TTL值为10分钟

  6. 再添加一个解析,记录类型A

  7. 主机记录填www

  8. 解析线路选择默认

  9. 记录值填你GitHub 的ip地址(在cmd中ping:)

ping bxm0927.github.com
Copier après la connexion

点击保存,等 1 分钟,访问下你自己的域名,一切就ok了。

域名绑定成功,域名解析成功,因此你在浏览中输入 www.lovebxm.com,或 lovebxm.com 就可以访问到博客了,输入 bxm0927.github.io 会重定向到 www.lovebxm.com。过程:www 的方式,会先解析成 http://xxxx.github.io,然后根据 CNAME 再变成 www

注意:CNAME文件在下次 hexo deploy的时候就消失了,需要重新创建,这样就很繁琐

方法一:每次 hexo d 之后,就去 GitHub 仓库根目录新建 CNAME文件

方法二:在 hexo g 之后, hexo d 之前,把CNAME文件复制到 “\public" 目录下面,里面写入你要绑定的域名。

方法三(推荐):将需要上传至github的内容放在source文件夹,例如CNAME、favicon.ico、Tutoriel super détaillé sur la façon de créer un blog avec Hexo + GitHub Pagess等,这样在 hexo d 之后就不会被删除了。

方法四:通过安装插件实现永久保留

$ npm install hexo-generator-cname --save
Copier après la connexion

之后在_config.yml中添加一条

plugins:
- hexo-generator-cname
Copier après la connexion

需要注意的是:如果是在github上建立的CNAME文件,需要先clone到本地,然后安装插件,在deploy上去即可。CNAME只允许一个域名地址。

注意1:每次生成的 CNAME 都是 yoursite.com 怎么解决?

修改 _config.yml

url: 
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
Copier après la connexion

Hexo 的常用操作

发表一篇文章

hexo new "文章标题"

D:\GitHub\Hexo\test>hexo new "文章标题"
INFO  Created: D:\GitHub\Hexo\test\source\_posts\文章标题.md
Copier après la connexion

在本地博客文件夹 source\_posts 文件夹下看到我们新建的 markdown 文件。

当然,我们也可以手动添加Markdown文件在source->_deploy文件夹下,其效果同样可以媲美hexo new

文章编辑好之后,运行生成、部署命令:

hexo clean

hexo g

hexo d
Copier après la connexion

当然你也可以执行下面的命令,相当于上面两条命令的效果

hexo clean

hexo d -g
Copier après la connexion

新建一个自定义页面

hexo new page folder
Copier après la connexion

文章如何添加多个标签

有两种多标签格式

tags: [a, b, c]
或
tags:
  - a
  - b
  - c
Copier après la connexion

显示部分文章内容

如果在博客文章列表中,不想全文显示,可以增加 <!-- more -->, 后面的内容就不会显示在列表。

<!--more-->
Copier après la connexion

更改主题

官方主题库:https://hexo.io/themes/

Hexo主题非常,推荐使用 Next 为主题,请阅读 Next 的官方文档(  ),5 分钟快速安装。

再提示一点,大家可以hexo主题修改一步就hexo s看下变化,初次接触对参数不清楚。只有hexo s后在可以在本地浏览到效果,Ctrl+C 停止服务器。

添加插件

添加 sitemap 和 feed 插件

切换到你本地的 hexo 目 CIA ,在命令行窗口,输入以下命令

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save
Copier après la connexion

修改 _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
Copier après la connexion

再执行以下命令,部署服务端

hexo d -g
Copier après la connexion

配完之后,就可以访问 https://bxm0927.github.io/atom.xml 和 https://bxm0927.github.io/sitemap.xml ,发现这两个文件已经成功生成了。

添加 404 页面

GitHub Pages 自定义404页面非常容易,直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。

其实,404页面可以做更多有意义的事,来做个404公益项目吧。

推荐使用腾讯公益404  :

<script>
</script>
Copier après la connexion

复制上面代码,贴粘到目录下新建的404.html即可!

多PC同步管理博客

很多人可能家里一台笔记本,公司一个台式机,想两个同时管理博客,同时达到备份的博客主题、文章、配置的目的。下面就介绍一下用github来备份博客并同步博客。

  1. A电脑备份博客内容到github

配置.gitignore文件。进入博客目录文件夹下,找到此文件,用sublime text 打开,在最后增加两行内容/.deploy_git和/public

  1. 初始化仓库。

在博客根目录下,在git bash下依次执行git init和git remote add origin 为远程仓库地址。

  1. 同步到远程仓库。

gitbash下依次执行以下命令

git add . #添加目录下所有文件

git commit -m "更新说明" #提交并添加更新说明

git push -u origin master #推送更新到远程仓库
Copier après la connexion
  1. B电脑拉下远程仓库文件

在B电脑上同样先安装好node、git、ssh、hexo,然后建好hexo文件夹,安装好插件,(然后选做:将备份到远程仓库的文件及文件夹删除),然后执行以下命令:

git init

git remote add origin <server>

git fetch --all

git reset --hard origin/master</server>
Copier après la connexion
  1. 发布博客后同步

在B电脑发布完博客之后,记得将博客备份同步到远程仓库
执行以下命令:

git add .

#可以用git master 查看更改内容

git commit -m "更新信息"

git push -u origin master  #以后每次提交可以直接git push
Copier après la connexion

平时同步管理
每次想写博客时,先执行:git pull进行同步更新。发布完文章后同样按照上面的 发布博客后同步 同步到远程仓库。

中文乱码

在 md 文件中写中文内容,发布出来后为乱码,原因是 md 的编码不对,将 md 文件另存为UTF-8编码的文件即可解决问题。

Conclusion

Il existe de nombreux systèmes pour créer des sites Web, tels que :
- Pages Hexo + GitHub
- Pages Jekyll + GitHub
- WordPress + serveur + nom de domaine
- DeDeCMS + serveur + Nom de domaine
- …

Utiliser Hexo + GitHub Pages pour créer un site Web présente des avantages et des inconvénients :
- GitHub Pages ne prend pas en charge la gestion de base de données, vous ne pouvez donc créer qu'un blog avec des pages statiques, pas comme les autres blogs (comme WordPress) Gérez le contenu de votre blog via une base de données.
- Cependant, GitHub Pages ne nécessite pas l'achat d'un serveur. Il est exempt de frais de serveur et peut également effectuer un équilibrage de charge avec 300 M d'espace libre.
- Est-il vraiment nécessaire d'utiliser une base de données pour un blog personnel ? La réponse est non. Le blog doit être statique et les commentaires peuvent être enregistrés à l'aide de la publication tierce NetEase Cloud. Les blogs statiques sont plus propices à l'exploration des moteurs de recherche, et la sensation de légèreté est vraiment bonne.
- Avec Hexo on peut facilement écrire des articles en Markdown, ce qui est parfait à mon goût. Markdown est vraiment un langage développé spécifiquement pour les programmeurs. Maintenant, j'ai l'impression que je ne veux rien écrire sans Markdown. Quel éditeur de texte riche, quel mot, c'est trop gênant ! Et les styles sont tellement moches ! L'efficacité est trop faible !

Recommander plusieurs éditeurs Markdown en ligne utiles :
- Blog de devoirs :
- Mark Flying Elephant : https://maxiang.io

Lit d'Tutoriel super détaillé sur la façon de créer un blog avec Hexo + GitHub Pagess recommandé :
- Minimaliste lit d'Tutoriel super détaillé sur la façon de créer un blog avec Hexo + GitHub Pagess + plug-in Chrome + Qiniu Space, Qiniu Cloud Storage fournit 10 Go d'espace libre et 10 Go de trafic mensuel. C'est le meilleur pour stocker des Tutoriel super détaillé sur la façon de créer un blog avec Hexo + GitHub Pagess de liens externes sur des blogs personnels. Qiniu Cloud Storage dispose également de diverses fonctions de traitement graphique et de vignettes. , et les vitesses de stockage vidéo sont également impressionnantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!