Use firebase+hexo para crear un sitio web de blog personal

título: Registrar el origen del blog
fecha: 2020-07-02 15:11:24
etiquetas: firebase

1. Introducción

Este blog fue creado el 2 de julio de 2020. Fue construido utilizando hexo blog framework + host de alojamiento de alojamiento firebase.

imagen

Porque también construí un blog antes, pero en ese momento usaba la solución vps+wordpress (inestable, los datos se pierden fácilmente y tengo que alquilar un servidor para alojar el sitio web yo mismo). Durante este período de aprendizaje de Linux, descubrió accidentalmente la plataforma firebase secundaria de Google . (Es una plataforma *backend-as-a-service (BaaS)* propiedad de Google. En pocas palabras, el backend está en la nube, por lo que no tiene que preocuparse por las bases de datos, la autenticación , almacenamiento, expansión, etc., simplemente llámelo directamente).

imagen

En la actualidad, Firebase brinda una gran cantidad de servicios, aquí usamos el hosting .

El plan de alojamiento gratuito ofrece:

1G de espacio de almacenamiento
Después de que se exceda el tráfico de 10G/mes, se puede comprar pagando una tarifa.

En general, gracias a la aceleración de cdn de Google en todo el mundo, se puede acceder a sitios web alojados en la plataforma firebase a alta velocidad de forma gratuita (mucho más rápido que las páginas de github)

Ahora que el blog se lanzó oficialmente, registrará algunos de mis registros de aprendizaje.

2. El código que ejecuta el blog

parte hexagonal

1. Instale npm, Node.js

sudo apt update -y
sudo apt install -y nodejs nodejs-legacy npm
sudo apt-get install -y npm

2. Inicializar carpeta

Ejecutar la instalación del framework del blog hexo en un directorio en blanco

sudo hexo init

Una vez completada la inicialización, existen los siguientes directorios de archivos:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

Entre ellos _config.ymlestá el archivo de configuración, sourceque almacena todos los artículos.La themescarpeta se puede configurar con diferentes temas, y una gran cantidad de temas se pueden encontrar en el sitio web oficial.

3. Escritura

Cuando todo esté listo, puede compilar el primer artículo, en el directorio principal hexo

hexo new post <title>

Se source/_postsgenerará un artículo debajo de la carpeta, como ejecutar

hexo new post 第一篇文章

Encontrará un archivo llamado en el directorio anterior 第一篇文章.md, y luego puede usar Markdown para escribir en él. Se recomienda utilizar Typora como herramienta de escritura para Markdown.

4. Generar archivos html de página estática

Después de escribir, ejecute el comando en el directorio raíz

hexo g

Los artículos y temas se empaquetarán juntos para generar HTMLarchivos, y los archivos generados se colocarán publicen la carpeta del directorio raíz. Todo lo que el sitio web necesita para funcionar se coloca en esta carpeta.

Además, es posible ejecutar

hexo server

Este comando iniciará el servidor localmente, que se puede usar http://localhost:4000/para obtener una vista previa del efecto.

Se puede ver que el uso de hexo es muy simple. Se pueden encontrar instrucciones más detalladas en la documentación oficial .

Pero aquí firebase se usa como servidor de alojamiento, y no es necesario iniciar el servidor local durante la operación real, puede ejecutar directamente el comando para enviar el blog hexo a la plataforma firebase.

Presentación completa:

firebase deploy

Confirmar solo los cambios:

firebase deploy --only hosting

La implementación está completa y el contenido se implementará en la URL de alojamiento predeterminada del proyecto de Firebase: project-id.firebaseapp.com

De esta forma, puede ver los resultados modificados en el sitio web de mi blog: https://usg-cn.web.app/.

parte base de fuego

Firebase , otro artefacto de Google, no lo presentaré en detalle, solo usamos una pequeña parte de él: hosting.

imagen

Respecto al hosting , la introducción oficial es la siguiente:

Firebase Hosting brinda alojamiento estático rápido y seguro para sus aplicaciones web.
Firebase Hosting es un servicio de hospedaje de contenido web de nivel de producción para desarrolladores. Con Firebase Hosting, puede implementar rápida y fácilmente aplicaciones web y contenido estático en una red de entrega de contenido global con solo un comando.

Hay una serie de beneficios muy raros al usar Firebase:

Global SSD CDN, más rápido que GitHub.
Retroceso con un clic. Firebase Hosting brinda control y administración de versiones completos con una reversión con un solo clic.
SSL de configuración cero, HTTPS de inicio automático.
Perfecta compatibilidad con documentos en chino.

La experiencia de usar Firebase es muy buena, aunque es un producto de Google, brinda un soporte de documentos en chino muy completo, y la escritura es muy simple y fácil de entender, el mismo código de ejemplo proporciona versiones de múltiples lenguajes de programación y muchas funciones. en él se puede utilizar rápidamente.

1. Crea un proyecto

Primero visite Firebase para crear un proyecto.

Preste atención al ID del proyecto cuando lo cree . Se utilizará en la URL. Si no desea definir el nombre de dominio usted mismo, siempre utilizará este ID como el nombre de dominio de acceso en el futuro. Por ejemplo, el ID es usg-cn, luego el nombre de dominio será https://usg-cn.firebaseapp.com/y https://usg-cn.web.app/

2. Inicialización

Ejecute el siguiente comando para instalar Firebase (preinstalado Node.js):

npm install -g firebase-tools

Luego ejecute el siguiente comando para iniciar sesión y aparecerá una ventana del navegador después de ejecutar:

firebase login

Después de iniciar sesión, cambie al directorio Hexo recién generado,

cd hexo/

correr

firebase init

Cuando se ejecute, se le pedirá que elija qué función usar, porque hemos usado alojamiento, así que elija aquí Hostingy luego se le pedirá que elija un directorio para usar como directorio raíz público. Este directorio es donde se colocan todos los archivos estáticos. De forma predeterminada public, el nombre es exactamente el mismo que el nombre del directorio de archivos estáticos generado por Hexo , por lo que no es necesario cambiarlo.

Este comando creará un archivo de configuración en el directorio del proyecto firebase.json, que se puede usar para personalizar el comportamiento del hospedaje.

correr

Finalmente, después de ejecutar todos los cambios

hexo g

Este comando hará que Hexo genere publiccarpetas, porque Firebase implementa carpetas públicas, por lo que Hexo debe ejecutarse primero.

entonces corre

firebase deploy

La implementación está completa y el contenido se implementará en la URL de alojamiento predeterminada del proyecto de Firebase: project-id.firebaseapp.com

Ya has terminado, ahora es el momento de disfrutar de tu blog.

Comandos comunes

hexo clean
hexo generate
hexo deploy

hexo cleanSe utiliza para borrar archivos estáticos generados por versiones anteriores (archivos públicos enviados al extremo remoto)
hexo generateGenere un nuevo archivo estático (archivo público), que se genera en función del /sourcecontenido del archivo
hexo deployempujar el blog de implementación de github

hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy # 将静态博客页面部署到GitHub
hexo help  # 查看帮助
hexo version  # 查看Hexo的版本

hexo newCree un nuevo artículo, el artículo creado estará en source/_posts/el directorio, el formato del artículo es .md (formato Markdown), puede editar directamente el blog y editar este archivo cada vez, o puede arrastrar el archivo .md escrito directamente a este en la carpeta
hexo generateGenere una página estática, todos los archivos generados están public/debajo del archivo, este archivo es el último archivo enviado a github

Dirección del blog: https://usg-cn.web.app/
Dirección de referencia: https://hyrepo.com/tech/hexo-firebase-blog/