Configure rápidamente un blog personal: tutorial a nivel de niñera

Este artículo es una versión integrada del contenido de la columna. Se publicó en secciones en la etapa inicial. Para conocer el proceso, consulte la identificación del número de serie de esta columna.

Prefacio

De vez en cuando, veía una pregunta que alguien elogiaba mucho: ¿Cómo demostrar la capacidad de los estudiantes de informática? En cuanto a la siguiente pregunta, hubo muchos comentarios de los internautas, el más claro y realista que recuerdo es: ¿Qué habilidad tienes, solo para fingir ser X?

Al ver esto, tengo que levantarme y decir algo. La única forma de demostrar tu capacidad es crear un sitio web, ¿verdad? Después de todo, sigue siendo "especialización en la industria", ¿verdad? No sé por qué entrenar mis habilidades prácticas y ampliar mis conocimientos se ha convertido en un pretexto para los guerreros del teclado. No puedo vencerlo. Les pido clemencia.

Bien, volviendo al tema, mi intención original de crear un sitio web personal es en realidad muy simple, tal vez lo hayas pensado, pero simplemente no lo has hecho. Pienso: ahora hay muchas plataformas de escritura en Internet, como la estación C que estoy usando ahora, que es muy madura y tiene debates comunitarios, publicaciones de preguntas, actualizaciones de Blink, etc., todo disponible. Después de aprender los conocimientos relevantes, ¿por qué no puedo escribir uno yo mismo? Quizás sea más porque me gusta trastear, jaja,

la primera vez que entré en contacto con él fue en el módulo “Personalización de sección” para publicación de artículos en la estación C. Ingresando unas pocas líneas de código, puedes tener una interfaz hermosa. . En ese momento, debido a que aún no había entrado en contacto con CSS y el front-end web, lo obtuve de la prostitución gratuita en Internet, lo que despertó mi interés por estudiar en profundidad.

¿Qué es un blog? Un blog es una plataforma para que todos compartamos y nos comuniquemos, podamos aprender de las experiencias de otras personas y mejorarnos. Esto es cierto para las personas que leen blogs y para los blogueros que escriben blogs. Es un resumen de lo que han aprendido, que puede aclarar su propio pensamiento, facilitar revisiones futuras y desarrollar buenos hábitos. Los blogs técnicos pueden registrar los problemas que encontramos y mejores soluciones para el manejo de errores. Si encontramos los mismos problemas en el proceso de desarrollo futuro, nuestra memoria será más profunda.

Cuando tienes una idea, tienes que actuar. Cuando comencé a implementarla, me di cuenta de que no era un artículo publicado por algunos titulares, como "Construye tu propio sitio web en diez minutos, y todavía no lo harás". ¿No sabes cómo crear un sitio web tú mismo?". Cuando realmente miras sus videos y artículos y los operas, algunos de ellos son verdaderos maestros. Deberías saber algunas de las cosas que hacen por defecto y deberías poder escribirlos de manera más simple. También hay algunos "grandes porteadores" que simplemente publican artículos de otras personas sin vincularlos al artículo original.

Precisamente porque no encontré un conjunto completo de recursos que pudieran ayudar a los principiantes a desarrollar un sitio web, decidí escribir el proceso de creación de un sitio web UP y compartir algunas de mis experiencias desde los principiantes hasta la implementación final. Entonces, si tú también quieres tener un sitio web propio, puedes seguirnos y comenzar. Si encuentras algún problema durante el proceso, puedes enviar un mensaje privado o dejar un mensaje. Ahora comencemos

Piénsalo, ¿qué utilizamos más para comprobar la información? Algunos amigos dirán: No es necesario preguntar, debe ser "ir a la universidad en la estación B" o debe ser un motor de búsqueda. Sí, creo que esta es la herramienta que la mayoría de nosotros utilizamos cuando aprendemos cosas nuevas y avanzamos. Entonces, ¿qué buscamos? Por ejemplo, puedes hacer esto:

Quizás también puedas hacer esto:

De hecho, puedes buscar muchos videos y artículos. Pero en esta parte, describo mi viaje mental desde la perspectiva de un principiante: porque esto es actualmente solo una idea preliminar en mi mente y no sé cómo implementarla todavía. Es como si una persona estuviera perdida en la montaña. Solo sé que quiero salir, pero no encuentro el camino.

En esta sesión, hablemos sobre cómo crear un sitio web y lo que debo preparar. La mayoría de los tutoriales en Internet son muy largos y no puedes terminarlos incluso después de deslizar el mouse varias veces. Los amigos que recién comienzan sentirán: "Vaya, es tan difícil, hay tantas cosas". Por eso aquí he clasificado el contenido de cada parte, solo debes seguir el orden y bajar paso a paso.

sitio web local

¿Por qué se enfatiza aquí que es "local"? Al principio, también miré los tutoriales y seguí las ideas de otras personas, como comprar primero un nombre de dominio, comprar un servidor, etc., y encontré trampas. Esto causará dificultades a la hora de comprar o elegir para aquellos que recién están comenzando. ¿Por qué no pensamos de una manera diferente? Ahora construyo un sitio web en mi propia computadora y luego lo "envío" para que otros puedan verlo. Mira, ¿no está esto claro?

Para implementar un sitio web en su propia computadora, necesita dos cosas necesarias: un navegador y herramientas de desarrollo . Todo el mundo debe tener el primero, así que no entraré en detalles (de lo contrario, ¿por qué leíste este artículo mío, jeje)? Concéntrate en esto último.

herramientas de desarrollo

Tormenta web

WebStorm es una herramienta de desarrollo de JavaScript propiedad de JetBrains. Ha sido elogiado por la mayoría de los desarrolladores chinos de JS como "artefacto de desarrollo web front-end", "el editor HTML5 más potente", "el IDE de JavaScript más inteligente", etc. Tiene el mismo origen que IntelliJ IDEA y hereda las funciones de la poderosa parte JS de IntelliJ IDEA.

Sin más preámbulos, ven aquí para descargar el portal

. Hay un pequeño problema. Esto es de pago. Si eres un estudiante universitario, puedes solicitar una cuenta educativa de forma gratuita a través de la certificación de estudiante. Si... (No lo haré). No digo más, te lo diré. Pregúntale a Du Niang, puedes encontrar una manera), simplemente instálalo sin pensarlo, que no cunda el pánico.

vscode

Visual Studio Code ("VS Code" para abreviar) es un lenguaje de programación multiplataforma que Microsoft anunció oficialmente en la Build Developer Conference el 30 de abril de 2015, que se ejecuta en el editor de código fuente de la plataforma Mac OS que se ejecuta en el escritorio y está disponible. para Windows, macOS y Linux. Tiene soporte integrado para JavaScript, TypeScript y Node.js, y un rico ecosistema de extensiones para otros lenguajes (como C++, C#, Java, Python, PHP, Go) y tiempos de ejecución (como .NET y Unidad)

Las dos herramientas de Portal

son específicamente: la primera es un depósito familiar (tiene de todo, no tienes que preocuparte por eso, solo úsala), y la segunda es una empresa fantasma que requiere varios empleados (complementos) para implementar algunas funciones. Entonces, si eres demasiado vago para configurarlo, simplemente descarga el primero. El segundo puede ser más conveniente en la sintaxis de Markdown para blogs , del que hablaré más adelante. Si es un novato aquí, le sugiero que descargue WebStorm , algunas configuraciones a continuación serán más convenientes.

marco

¿Qué es "framework"? Estoy confundido, jeje. No entre en pánico cuando suceda algo, solo escuche lo que Jason tiene que decir. Aquí nos fijamos en la explicación de una determinada entrada de grado:

Un marco es un marco, en referencia a su naturaleza restrictiva, y un estante, en referencia a su naturaleza de soporte. Es una estructura conceptual básica que se utiliza para resolver o abordar problemas complejos.
Esta definición amplia de marco es muy popular, especialmente en conceptos de software. Los marcos también se pueden utilizar en estructuras mecánicas.

¿Qué significa esto? Por ejemplo, si construimos una casa, ¿cómo se construye? No podemos empezar sin dibujos y trabajadores ¿No es esto una "fantasía"? En primer lugar, el diseñador debe diseñar el dibujo de acuerdo con las necesidades del usuario, y luego los trabajadores pueden comenzar a construir la casa basándose en el dibujo, ¿verdad? Se han omitido muchas cosas aquí. Grandes nombres de la industria, por favor háganmelo saber. Déjenme darles un ejemplo.

Lo mismo ocurre cuando creamos sitios web. ¿De verdad crees que los programadores escriben tantos sitios web desde cero línea por línea día y noche? emmm, en realidad mi respuesta a esta pregunta al principio fue: Bueno, sí, eso es seguro. No fue hasta que hice unas prácticas que descubrí que no todo en la empresa se desarrollaba desde cero. (El código abierto es bueno, jajaja) ¿Quieres ser así?

Un producto, proyecto, sitio web... Mientras sea algo que ya hayan hecho sus predecesores, podemos aprender de ello, aprender buena programación, código abierto, y para qué perder el tiempo repitiéndolo si otros ya lo han implementado. ? Especialmente WordPress , que se describirá a continuación , es simplemente una "operación sin cerebro": es posible que ni siquiera sepa lo que ha hecho, pero simplemente aparecerá un sitio web que le pertenece.

En términos simples, un marco de blog es un conjunto de código fuente escrito por otros. Solo necesita tomarlo y poder usarlo. Puede cambiar su propia configuración y combinarlo con el tema que desee. Esto es suficiente (grande muchachos, por favor tomen un desvío) . Entonces, a continuación compartiré contigo algunos marcos que aprendí al crear mi sitio web personal y los analizaré brevemente para que puedas elegir.

Como dice el viejo refrán, la audiencia de esta columna son amigos que son nuevos en ella, por lo que no mencionaré algunos parámetros complicados que no es necesario conocer. Solo cubriré las partes más críticas, para que todos puedan encontrarlas rápidamente. el que les conviene.

Permítanme indicar de antemano que el marco utilizado por Jason eshexo, puedes elegir diferentes a mí, pero las configuraciones no son las mismas, se pueden obtener las mismas

Hexo (muy recomendable)

Hexo es un marco de blogs rápido, simple y poderoso. Escribes tu publicación en Markdown (u otro lenguaje de marcado) y Hexo genera archivos estáticos con hermosos temas en segundos. >Haga clic aquí para obtener información directa<

Características hexo:

• Excelentes resultados operativos y bajo costo.
• Multiplataforma: local, nube, PC, terminal móvil todo en uno
• Admite una variedad de servicios CDN (habilitados para aumentar la velocidad de registro de páginas web)
• Los grandes buscadores tienen mayores ventajas en la inclusión y ponderación de los sitios web (es más probable que los usuarios encuentren el contenido que publicas)

Si le gusta la configuración y completa ciertas configuraciones después de operar el código, esta se adaptará a sus gustos. Publique una captura de pantalla de configuración como referencia:

WordPress

WordPress es un sistema de gestión de contenidos (CMS) gratuito y de código abierto basado en PHP y MySQL. Es el software CMS más utilizado en el mundo. Comenzó como un simple sistema de blogs y se ha convertido en un sistema CMS completamente funcional con miles de complementos, widgets y temas. >Haz clic en mí directamente<
Características de WordPress:

• Amplia gama de aplicaciones comerciales
• Conveniente para copias de seguridad y transferencias posteriores, con soporte de herramientas incorporado
• Potente escalabilidad (piense aquí en el centro comercial de complementos de Google)
• Muy fácil de usar para personalizar (definitivamente puedes crear lo que quieras)

Si no desea ver esos códigos, puede usar esto. WordPress viene con administración de back-end. Elija el tema que desee y luego arrastre y suelte los controles requeridos (por ejemplo, si desea implementar la función de mostrar el tiempo, habrá una versión móvil como Es como un widget de escritorio, simplemente arrástrelo a donde desea que se muestre). Lo más importante es que para usarlo, primero necesitas conseguir un servidor.

Para que todos puedan encontrar el adecuado más rápidamente, no les daré muchas opciones y mucho menos les diré qué más hay (de lo contrario, pensarán que lo que tengo ahora puede no ser el mejor y quiero probar más). (Si este es el caso, perderá mucho tiempo sin darse cuenta. Es mejor construirlo primero con uno y luego reemplazar los otros cuando se familiarice con él más adelante.) Cuando comience de forma independiente, podrá Tener una idea clara y no confundirse. Pasar demasiado tiempo en un punto.

ambiente local

En cuanto a esto, sin demasiada introducción, se puede entender que necesitamos cemento, palas y otras herramientas y materias primas para construir una casa, el entorno local es la pala y la herramienta que utilizamos. El marco del blog de Hexo está hecho de materias primas como cemento. Necesitamos herramientas para empezar a trabajar, de lo contrario tendrías que hacerlo con las manos ...

git

Describe brevemente para qué se utiliza, Mira Aquí:

Git es un sistema de control de versiones distribuido de código abierto para un manejo ágil y eficiente de cualquier proyecto, pequeño o grande. Es un software de control de versiones de código abierto desarrollado por Linus Torvalds para ayudar a gestionar el desarrollo del kernel de Linux. Git se diferencia de las herramientas de control de versiones más utilizadas, como CVS y Subversion, en que utiliza una biblioteca de versiones distribuidas y no requiere soporte de software del lado del servidor.

Ignora las palabras anteriores que nunca has escuchado antes, ahí va. ¿Alguna vez ha utilizado un determinado disco de red? ¿Tiene copia de seguridad automática? Si selecciona una carpeta local, cuando el archivo local cambia, siempre que el software se esté ejecutando en segundo plano, ¿la nube será automáticamente consistente con la local? El proceso es así, pero la operación actual de git se puede comparar con una nube: con algunos comandos, puede "enviar/hacer una copia de seguridad" del código local a la nube.

No he discutido en profundidad las características distribuidas, comandos, etc. de git . Recomiendo que los amigos que están comenzando aquí puedan > leer el tutorial aquí < para comenzar rápidamente.

Como queremos usar Git, primero debemos instalar y configurar el entorno Git, haga clic aquí para descargar (sistema operativo Windows) y haga clic en el botón Descargar.

No entraré en detalles sobre el proceso de instalación, simplemente use la configuración predeterminada y haga clic en "Siguiente" para finalizar.

A continuación configuramos la información de la variable de entorno. Para más detalles, consulte aquí . Después de abrir la variable Ruta, agregue el directorio de instalación del entorno local (asegúrese de que la ubicación del archivo llegue a cmd).

Una vez completada la instalación, es posible que no vea el acceso directo en el escritorio. no te preocupes. Cuando buscamos Git en el cuadro de búsqueda de Windows, podemos ver varios íconos como este: puede hacer

clic directamente en Git Bash o hacer clic derecho en cualquier lugar del escritorio para abrir Git Bash aquí y usarlo.

nodo.js

>Descarga directa<

Muchos amigos están confundidos entre estas dos versiones. Después de leer esta explicación, creo que sabrás cuál necesitas. Jason usa la versión LTS .

LTS significa "soporte a largo plazo" y Current significa "actual".
Current significa la última versión lanzada (una vez cada 6 meses), que puede ser una versión impar o par.

hexo

Instalar

Haga clic derecho en el escritorio, abra git bash aquí e ingrese el comando para instalar (la ubicación predeterminada es suficiente y no se recomienda la configuración posterior)

npm install -g hexo-cli

Ya lo instalé aquí. La pantalla puede ser diferente a la suya. Simplemente cierre la ventana después de la ejecución. En este momento, ya existe un entorno hexo local. ¿Qué tal? ¿No es muy sencillo?

inicialización

Para mayor comodidad, se recomienda crear un nuevo directorio directamente bajo cualquier letra de unidad, excepto la unidad C, y asignarle el nombre que desee. Por ejemplo, creé una nueva carpeta hexo-jason-blog en la unidad D. Puede consultarla.

Originalmente, quería usar el entorno local que había configurado para demostrarlo a todos, pero para reflejar verdaderamente el entorno operativo de un "novato", Jason decidió restablecerlo y volver a operar paso a paso, así que todos puedan dar cada paso hasta el éxito.

Abra git bash aquí en esta carpeta e ingrese el comando

hexo init

Es posible que encuentres este error en este momento. No entres en pánico. Es causado por la red al clonar desde GitHub

. Inténtalo unas cuantas veces más. Para soluciones a este tipo de problemas, consulta aquí<

Efecto exitoso:

estos archivos se agregan al directorio de archivos raíz.

Introduzcamos brevemente la estructura de archivos de hexo:

• público Todo el contenido de la página web finalmente visto
• El complemento node_modules y el módulo node.js requeridos por hexo
• _config.yml archivo de configuración del sitio, establece cierta información pública, etc.
• información de la aplicación package.json, configure el paquete js requerido para que se ejecute hexo
• carpeta de plantillas de scaffolds, los nuevos artículos contendrán el contenido de la plantilla correspondiente de forma predeterminada
• temas almacena archivos de temas y hexo genera páginas web estáticas basadas en temas (muy rápido)
• la fuente se utiliza para almacenar recursos del usuario (a excepción de la carpeta de publicaciones, se ignoran otros archivos nombrados con "+ nombre de archivo")

Nuestras operaciones diarias de escritura están todas en source/_post. Dado que ya tenemos una herramienta para "mezclar barro" al construir una casa: WebStorm, ¿por qué no usarla?

Abra el directorio raíz hexo-jason-blog en WebStorm (simplemente arrastre el archivo al acceso directo de WebStorm en el escritorio para abrirlo), abra la terminal e ingrese el comando

hexo s

Haga clic en el enlace http://localhost:4000 (posición subrayada en amarillo en la imagen) para obtener una vista previa local. El valor predeterminado es el tema horizontal integrado de hexo. El cursor permanece

en la posición Terminal y la combinación de teclas Ctrl+ Cdetiene la vista previa local. Esto es el sitio web local más simple.

Emmm, mis amigos también obtuvieron una vista previa exitosa de la página predeterminada. Probablemente sea así. Oye:

Pero siempre siento que falta algo. Sin algunas de las cosas que debería tener un blog o un sitio web, ¿cómo se puede hacer que se parezca más a un sitio web?

tema

Aquí presentamos el tema y el marco . El Hexo que estamos usando ahora es un marco de blog rápido y simple. El tema es un "accesorio" desarrollado por desarrolladores basados ​​en este marco con funciones más completas, estilos de página y más columnas. Al igual que el teléfono móvil que usas, reemplázalo con una funda para teléfono móvil, al elegir una funda para teléfono móvil debes coincidir con el modelo de tu teléfono móvil, de lo contrario no coincidirá, ¿verdad?

Para tomar otro "castaño", como un teléfono Android (código cerrado de IOS, a menos que tenga jailbreak), el tema de escritorio predeterminado producido por el fabricante. En la aplicación de la tienda de temas , puede elegir íconos, fondos y fuentes más atractivos según su propias preferencias. Es como "ponerse ropa nueva", desde esta perspectiva podemos entender lo que vamos a hacer a continuación.

estilo

En cuanto a temas, definitivamente habrá muchos. Una vez más, cada uno puede elegir según sus propias preferencias. Aquí está la biblioteca de temas oficial . Prefiero el tema Mariposa . Déjame darte una nueva apariencia para tu sitio web.

Mariposa

Déjame mostrarte primero la página temática.

Página de inicio del blog

Página de publicación del blog

De la documentación del tema, se puede ver que el autor lo ha estado manteniendo muy recientemente. Como dice el refrán, un buen producto debe tener buena documentación, el autor también es muy atento, puedes seguir la documentación para configurarlo paso a paso, es muy sencillo, solo formando una cadena de algunas herramientas.

solicitud

• Comando de entrada de terminal

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

Espere a que se complete la instalación. Algunos archivos del tema mariposa se muestran en la carpeta de temas .

• Instalar complemento

Instale pug y stylus renderer. Si no está instalado, la interfaz de vista previa es la siguiente:

ingrese el comando en la consola, presione Enter y espere la instalación.

npm install hexo-renderer-pug hexo-renderer-stylus --save

• Modificar archivo de configuración

Busque el archivo **_config.yml en el directorio raíz del sitio web y cambie el tema a mariposa** (tenga en cuenta el formato del archivo yml )

• vista previa local

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览

Es posible que las representaciones

aún parezcan tan "toscas", bueno, este problema implicará el "embellecimiento del tema" posterior (en realidad, solo agrega algunas imágenes atractivas, lo cual también es muy simple). Mi blog no ha sido optimizado en detalle. Es muy tosco y el tiempo es limitado. Hablaré de ello más tarde. Puedes echarle un vistazo y dejar un "pensamiento". Creo que lo harás mejor que yo.

mi blog

Lanzado oficialmente

cama de imagen

¿Es esto una cosa ma? ? ? Que no cunda el pánico, ¿no crees que nuestro sitio web con el tema predeterminado no se ve nada bien? Eso se debe a que no hay imágenes. ¿No sería mucho mejor si lo reemplazaras con un conjunto de imágenes y lo optimizaras? Cuando nos referimos a imágenes en Internet, una forma es subirlas localmente y poner la referencia de la ruta en el código; la otra forma es a través de la URL, obviamente esta última es más conveniente (si se compara con el servidor que se usará más adelante). , a medida que la cantidad de imágenes aumenta día a día A medida que aumenta el número, el espacio de almacenamiento disminuye gradualmente. Cada vez que publicas una publicación, debes cargarla junto con la imagen. ¿Cuánto espacio ocupará?)

Sin embargo, ¿no sería fantástico si tuviéramos un lugar que pudiera convertir imágenes locales en enlaces (todos pueden acceder a las fotos que publicaste a través de este enlace)? Picgo y algunos otros complementos pueden hacerlo.

Actualicé un artículo hace algún tiempo usando GitHub y SM.MS. Si tienes amigos que no pueden operar por analogía, > mira aquí < Dado que GitHub es extranjero después de todo, la velocidad de acceso será un poco lenta. SM.MS es una marca antigua que ha estado funcionando durante mucho tiempo, pero ambas de ellos son ligeramente más lentos en la velocidad de acceso.

Jason recomienda encarecidamente utilizar la nube de código nacional (Gitee) con Picgo . Estable, rápido y no es fácil de perder. (PD: Algunos amigos preguntarán aquí. He hecho público mi almacén y todas mis fotos están en él. ¿Hay alguna fuga de privacidad o algo así?) Para este tipo de preguntas, solo puedo decir quién tiene tiempo libre todos los días

. ¿Estás bien y quieres visitar tu almacén? ? Además, ¿puedes subir fotos XXX (tu propia imaginación) al almacén? ? Así que siéntete libre de usarlo y no creas que es muy picante.

Además, un recordatorio amistoso: la capacidad máxima de almacenamiento de la cuenta de la versión gratuita de Gitee es 5G. Si el almacén está lleno, recuerde cambiar la ruta desde el software. Después del uso, no cambie el nombre de su cuenta de Gitee (ni el apodo, el nombre en inglés), de lo contrario esperará a 404 Bar

Configuración de mariposa

Ponga la documentación oficial directamente , los amigos pueden configurarla primero, es muy simple. La página que ve puede estar en chino tradicional. No utilice el motor de traducción que viene con el navegador (es posible que parte del contenido no se muestre después de la traducción). El considerado autor ya lo ha pensado. Solo necesitamos cambiarlo. la configuración en la esquina inferior derecha del sitio web

. Sen publicará un número especial más adelante para hablar sobre algunos problemas en la configuración del tema. Creo que los amigos que ven esto no pueden esperar para publicar sus sitios web en línea. Centrémonos en este tema. .

Configuración de páginas de GitHub

Las páginas de GitHub son páginas web creadas directamente desde repositorios/proyectos en GitHub . La administración es simple. Edite el contenido en el almacén localmente y cárguelo en GitHub. Las páginas de GitHub pueden completar rápidamente la actualización. El punto clave es que no cuesta dinero, no cuesta dinero, no cuesta dinero. Crear un nuevo

almacén Y complete el contenido de la siguiente manera. Preste especial atención a la

garantía de posición del cuadro rojo. Almacén público , complete el nombre correctousername.github.io , el sistema cambiará automáticamente a Páginas

Busque páginas en la configuración del almacén

y recuerde la dirección del almacén. Cargaremos los archivos locales en el almacén. Si está utilizando git

por primera vez en su computadora , configure la clave pública SSH (un protocolo de seguridad, puede comprenderlo). (como iniciar sesión en una determinada computadora). Código de verificación requerido por el sitio web)

Enlace al control remoto en WebStorm y agregue la dirección del almacén. Este no es el almacén requerido para publicar el sitio web (no el almacén "nombre de usuario" + github.io, cree uno nuevo para administrar el código local)

porque estos son comandos básicos de git , que también se mencionaron anteriormente. He estado aquí antes. Si no lo sabe, puede leer la información en esta columna. Todas son operaciones básicas y es muy fácil comenzar.

Modifique la configuración de implementación del sitio web. Abra git bash aquí

en el directorio raíz local del sitio web y ejecute los siguientes comandos en secuencia.

hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览
hexo d //部署项目

Una vez completada la ejecución, todos pueden acceder a su sitio web a través de su nombre de usuario + nombre de dominio github.io . En este punto, hemos lanzado con éxito nuestro sitio web.

Si cree que la velocidad de acceso de GitHub es lenta (bueno, en realidad es lenta y, a veces, no se puede abrir), puede implementarlo en Gitee . Las operaciones son las mismas y todavía están en chino. ser demasiado simple ei

Bueno, el lanzamiento efectivamente se lanzó. ¿Crees que un nombre como nombre de usuario + github.io es más fácil de recordar? ? Creo que si eres un novato ( un usuario que quizás ni siquiera sepa qué es GitHub ), definitivamente será muy difícil.

Entonces, ¿cómo hacer que sea lo suficientemente fácil de recordar y personalizado?

Por supuesto, esta parte definitivamente no es gratuita ¿Cómo puede haber alguna razón para obtener todo gratis? Bien, se recomienda completar las siguientes operaciones en Alibaba Cloud o Tencent Cloud . Si usa otras plataformas, no es imposible, pero se recomienda comprar nombres de dominio y servidores en la misma plataforma para una fácil administración.

Los principales fabricantes nacionales tienen garantías, por lo que no tienes que preocuparte por eso. Desde un punto de vista económico, elija el que tenga actividades y sea más asequible. Jason vio que las actividades de Alibaba Cloud en ese momento eran más asequibles que Tencent Cloud , así que ~~

Guía de compra de servidores

Recibí reacciones de algunos amigos: Hay tantas entradas, pero no encuentro dónde comprarlas/no encuentro la entrada al evento. A continuación te explicamos cómo consultar las últimas actividades, qué descuentos ofrece la plataforma y dónde encontrar la entrada.

Nube de Ali

Exclusivo para estudiantes

Complete la certificación de estudiante en el centro de cuentas para comprar más descuentos

Exclusivo para eventos

Últimas actividades >Haz clic en mí para obtener acceso directo<

Nube Tencent

Debo decir que las interfaces de los dos son básicamente las mismas, solo necesitas estar familiarizado con una, por lo que las ubicaciones son casi las mismas.

Exclusivo para estudiantes

Para fiestas de estudiantes, consulte aquí >Haga clic en mí para obtener acceso directo<

Exclusivo para eventos

Últimas actividades >Haz clic en mí para obtener acceso directo<

nombre de dominio

Nombre de dominio (inglés: Domain Name), también conocido como dominio, es el nombre de una computadora o grupo de computadoras en Internet que consta de una cadena de nombres separados por puntos. Se utiliza para ubicar la computadora durante la transmisión de datos (a veces también Se refiere a la ubicación geográfica)
Dado que las direcciones IP son incómodas de recordar y no pueden mostrar el nombre y la naturaleza de la organización de la dirección, las personas han diseñado nombres de dominio y han asignado nombres de dominio y direcciones IP entre sí a través del Sistema de nombres de dominio (DNS, Sistema de nombres de dominio). ). , lo que permite a las personas acceder a Internet de forma más cómoda sin tener que recordar una cadena de direcciones IP que las máquinas pueden leer directamente.

Si no lo entiendes, no importa, entonces escucha a Jason en detalle. En pocas palabras, los recursos a los que se accede en la red pública tienen sus direcciones IP fijas , pero si deseas acceder a una IP específica , debes recordarla. Sin embargo, no es conveniente recordarlo, por lo que a la gente se le ocurrieron nombres de dominio .

Dale a la IP un nombre personalizado. Por ejemplo, el nombre completo es "Jason the Siege Lion". Mis amigos me llaman Sensen, Asen y Xiaosen. Todos son alias, pero todos apuntan a la persona "Jason the Siege Lion". " Entonces, ¿cómo implementar el alias en la red? Aquí hay una introducción a DNS , que es un servicio en Internet que asigna nombres de dominio reales e IP entre sí, es decir, lo que ingresa el nombre de dominio para acceder es la dirección IP correspondiente al nombre de dominio.

Comprar

Ahora que entendemos qué es un nombre de dominio , ¡compremos un nombre de dominio primero!
>Haga clic aquí< para consultar el nombre de dominio que desea

Por ejemplo, puede buscar después de ingresar la información, agregarla a la lista después de seleccionarla y luego pagar para comprar. Diferentes sufijos tienen precios diferentes, depende de las preferencias personales.

El sufijo de nombre de dominio, también conocido como nombre de dominio de nivel superior, se refiere al símbolo que representa un tipo de nombre de dominio. Los nombres de dominio con diferentes sufijos tienen diferentes significados. Los nombres de dominio se dividen en dos categorías: nombres de dominio específicos de un país (ccTLD), como .cn en China, .us en Estados Unidos, .ru en Rusia, y nombres de dominio internacionales generales (gTLD), como .com, .xyz, .top, .wang Hay más de 1000 tipos, como , pub, .xin, .net, etc. Todos los sufijos de nombres de dominio tienen la misma función, solo la apariencia y el significado son diferentes, sin embargo, solo unos pocos dominios Los sufijos de nombres como los de los ejemplos pueden respaldar el registro de sitios web en China.

Para obtener más información sobre el sufijo de nombre de dominio, consulte aquí

resolución DNS

Agregar nombre de dominio

Debido a que ahora tenemos un sitio web como nombre de usuario.github.io , para hacerlo simple y fácil de recordar, "resolvemos" "nombre de usuario.github.io" en el nombre de dominio comprado, de modo que el sitio web tenga todos los nombres de dominio y nombres de usuario. github.io tiene dos URL

Abra el almacén, busque la configuración, ingrese la configuración de las páginas, agregue un nombre de dominio.

También puede usar HTTPS forzado gratuito.

HTTPS (nombre completo: Protocolo de transferencia de hipertexto sobre capa SecureSocket) es un canal HTTP destinado a la seguridad. Basado en HTTP, garantiza la seguridad del proceso de transmisión mediante el cifrado de transmisión y la autenticación de identidad. HTTPS agrega SSL y HTTPS sobre la base de HTTP
La base de la seguridad es SSL [SSL (Secure Sockets Layer) y su sucesor Transport Layer Security (TLS)) es un protocolo de seguridad que proporciona seguridad e integridad de datos para las comunicaciones de red. TLS y SSL cifran la conexión de red entre la capa de transporte y la capa de aplicación]
, por lo que los detalles del cifrado requieren SSL. HTTPS tiene un puerto predeterminado diferente al HTTP y una capa de cifrado/autenticación (entre HTTP y TCP). Este sistema proporciona autenticación y métodos de comunicación cifrados. Se utiliza ampliamente para comunicaciones sensibles a la seguridad en la World Wide Web, como pagos de transacciones, etc.

Activa esta opción

Agregar registro de análisis

Ingrese a la consola de nombres de dominio en el sitio web oficial de Alibaba Cloud

. Si no, busque aquí

para encontrar el nombre de dominio que debe vincularse a nombre de usuario.github.io. Haga clic en "Resolver"

para ingresar y haga clic en "Agregar registro". para agregar dos registros.

La primera

y la segunda vez

la resolución DNS lleva tiempo. Después de un tiempo, si ingresa su nombre de dominio en el cuadro de navegación, la resolución será exitosa para el acceso normal.

¿Por qué se dice que está oficialmente en línea? Después de todo, el sitio web solo se puede ver en el servidor, por lo que es más formal, ¿verdad? Al igual que GitHub Pages , es gratuito, pero en China lleva tiempo después de la resolución DNS. Y siempre habrá sitios web inaccesibles o desconectados. La situación es demasiado inconveniente.

servidor

Primero echemos un vistazo, ¿ quién es el servidor ?

Un servidor es un tipo de computadora que funciona más rápido, soporta una carga mayor y es más cara que una computadora normal. El servidor proporciona servicios informáticos o de aplicaciones a otros clientes de la red (como PC, teléfonos inteligentes, terminales como cajeros automáticos e incluso equipos de gran tamaño, como sistemas de trenes). El servidor tiene capacidades informáticas de CPU de alta velocidad, operación confiable a largo plazo, sólidas capacidades de rendimiento de datos externos de E/S y mejor escalabilidad.
Según los servicios proporcionados por el servidor, en términos generales, el servidor tiene la capacidad de responder al servicio. solicitudes, realizar servicios, La capacidad de garantizar servicios. Como dispositivo electrónico, la estructura interna de un servidor es muy compleja, pero no es muy diferente de la estructura interna de una computadora común, como: CPU, disco duro, memoria, sistema, bus del sistema, etc.

Comprensión simple: un tema con poder y espacio continuos siempre sirve a los recursos que usted coloca (implementa) en el "cielo (nube)" y puede manejar varias solicitudes (por ejemplo, si ingresa un nombre de dominio en la barra de navegación para acceder a sitio web)

Hay dos tipos de servidores, nacionales y extranjeros . Según las leyes de nuestro país, los sitios web en China continental deben estar registrados y el tiempo de espera puede ser un poco más largo. Los países extranjeros no necesitan registrarse, pero no se puede garantizar la estabilidad y la velocidad de acceso. Puede juzgarlo usted mismo. Jason utiliza un sitio web de blog personal implementado por el servidor de aplicaciones ligeras de Alibaba Cloud.

Comprar

Esta es la configuración de mi servidor, puedes consultarla.

Si eres principiante, esta configuración básica es suficiente para una máquina de estudiante y se puede obtener de forma gratuita. Para conocer las reglas detalladas, consulta la comunidad > Haz clic en mí para ir directamente <

Desarrollador->Plan de Crecimiento

Exclusivo para estudiantes (después de probarlo, puedes obtener medio mes de servidor ECS gratis, y si publicas tu experiencia en la comunidad (publicar un blog), puedes renovar por dos meses gratis), para reglas específicas, consulte el sitio web oficial centro de cuentas->

ubicación de información básica Certificación completa de estudiante

Los descuentos en compras en el último lugar del evento serán aún mayores

desplegar

Configuración de contraseña

Cambie la contraseña de conexión remota en la ubicación que se muestra en la figura y guárdela.

Aunque puede usar un navegador para conectarse de forma remota , no se recomienda porque el sistema confundirá algunos atajos de teclado con operaciones en el navegador en lugar de un cuadro de diálogo. .

conección remota

Para evitar tales problemas, elegimos utilizar la herramienta de terceros Putty . Los pasos de operación específicos están muy detallados en el documento de ayuda de Alibaba Cloud y no se repetirán aquí.

Comience aquí y siga las indicaciones para completar la operación.

Inicie la herramienta Putty , conéctese al servidor, el nombre de usuario de inicio de sesión es root y la contraseña es la contraseña establecida en la ubicación del servidor (la contraseña ingresada en el sistema operativo Linux no se muestra por seguridad, así que no se preocupe). Cuando aparece la siguiente interfaz, significa que la configuración es normal y puede continuar con el siguiente paso.

configuración de git

1. Ingrese el comando para instalar git

yum install git

Si se pausa durante el proceso, ingrese yes / y / Y de acuerdo con las indicaciones para continuar con la instalación. Cuando aparezca completo al final, la instalación se realizó correctamente. 2.

Cree una cuenta de git

adduser git

3. Agregue permisos de cuenta git

chmod 740 /etc/sudoers
vim /etc/sudoers

4. Después de ejecutar el último comando, haga clic en la tecla del teclado ipara ingresar al modo de edición, busque el código de ubicación que se muestra en el ícono y

agregue una línea debajo

git     ALL=(ALL)     ALL

Presione Escla tecla e ingrese:wq(Significado: Salir después de guardar)

5. Vuelva a cambiar los permisos

chmod 400 /etc/sudoers

6.Establecer la contraseña de la cuenta git

sudo passwd git

Ingrese el comando y presione Enter. Ingrese la contraseña dos veces seguidas (no se muestra, normal). Cuando aparece el ícono, es exitoso.

7. Cambie a la cuenta git.

su git

Cree archivos ~/.ssh y ~/.ssh/authorized_keys

mkdir ~/.ssh
vim ~/.ssh/authorized_keys

Haga clic en la tecla del teclado para ingresar al modo de edición y pegue la clave pública SSHi generada por la computadora local . La ubicación del archivo es como se muestra en la figura . Después de pegar, presione la tecla e ingrese

Esc:wq(Significado: Salir después de guardar)

Conceder permisos

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

8. Pruebe si el inicio de sesión sin contraseña se realizó correctamente en git bash local aquí

ssh -v git@服务器公网IP

Aparece el contenido del ícono indicando que la conexión fue exitosa

9. Cree un almacén en el servidor y complete la configuración
Cambie a la cuenta raíz

sudo su root

Crear directorio de almacén de repositorios

mkdir /www/repo

Conceder permisos

	
chown -R git:git /www/repo
chmod -R 755 /www/repo

Crear el directorio raíz del sitio web hexo

mkdir /www/hexo

Conceder permisos

chown -R git:git /www/hexo
chmod -R 755 /www/hexo

Cree un nuevo repositorio git en blanco e inicialícelo

cd /www/repo
git init --bare hexo.git

10. Cree enlaces de Git para la implementación automática.

vim /www/repo/hexo.git/hooks/post-receive

Igual que arriba, ingrese al modo de edición, pegue el siguiente código, guarde y salga

#!/bin/bash
git --work-tree=/www/hexo --git-dir=/www/repo/hexo.git checkout -f

Modificar permisos

chown -R git:git /www/repo/hexo.git/hooks/post-receive
chmod +x /www/repo/hexo.git/hooks/post-receive

Almacén establecido

Instalar nginx

Nginx es un servidor web/servidor proxy inverso ligero y un servidor proxy de correo electrónico (IMAP/POP3), lanzado bajo el protocolo similar a BSD. Sus características son que ocupa menos memoria y tiene fuertes capacidades de concurrencia. De hecho, las capacidades de concurrencia de nginx funcionan mejor entre servidores web del mismo tipo.
Nginx (motor x) es un servidor web HTTP y proxy inverso de alto rendimiento, y también proporciona El servicio IMAP /POP3/SMTP, que publica código fuente bajo una licencia similar a BSD, es conocido por su estabilidad, amplio conjunto de funciones, archivos de configuración simples y bajo consumo de recursos del sistema.

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

Ingrese y a mitad de camino para continuar con la instalación (igual que arriba) y espere a que se complete la instalación. Se mostrarán la URL de inicio de sesión y la contraseña inicial. Preste atención a la

posición del cuadro rojo. Si ambas URL son inaccesibles, abra el puerto 8888 en el grupo de seguridad del servidor/firewall e

ingrese la cuenta inicial. Inicie sesión con su nombre y contraseña.

Después de ingresar, busque Nginx y haga clic para instalar (ya lo instalé aquí)

Sitio web-> Agregar sitio, el nombre de dominio es xxx .com sin ningún prefijo

Configuración->Archivo de configuración, modifique el contenido en el cuadro rojo

Configuración->Directorio del sitio web, modifique para/www/hexoY guarde

la terminal del servidor y reinicie el servicio.

service bt restart

En este punto, se completa la configuración del lado del servidor.

Modificación de configuración hexo

Ingrese al directorio raíz del blog local y modifique la ubicación de implementación del archivo _config.yml

El código fuente de la configuración del servidor de configuración de GitHub Pages

es el siguiente

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  type: git
  repo: git@你的域名:/www/repo/hexo.git
  branch: master # 注意此处分支设定,需在仓库中选择默认的分支

Abra la herramienta Putty , conéctese al servidor y otorgue permisos

chown -R git:git /www/repo/
chown -R git:git /www/hexo/

Abra git bash aquí en el directorio raíz local y ejecute el comando

hexo clean //清除缓存
hexo d -g //快速部署

Aparece el contenido del ícono que indica que la implementación fue exitosa, una vez completado el registro, puede acceder a él a través del nombre de dominio.

Presentación

El sitio web de Jason se registró recientemente, así que si no puede esperar, busque otra manera. En China, no nos atrevemos a cometer errores. Pasará por las siguientes etapas
después

de comprar el servidor y vincular el nombre de dominio a el sistema.Se le indicará que no hay ningún registro, simplemente siga las indicaciones para completarlo.

PIC

Nombre completo en inglés: Proveedor de contenido de Internet, nombre completo en chino: Proveedor de contenido de Internet
ICP puede entenderse como un operador de telecomunicaciones que brinda servicios de información de Internet y servicios de valor agregado a los usuarios. Es una empresa o departamento operativo formal aprobado por la autoridad nacional competente. .

Presentación en línea

Ingrese al sitio web oficial . Después de que Alibaba Cloud complete el registro de ICP , el sistema también le pedirá que opere.

Una vez completada la implementación, seleccione Registro en línea para

iniciar sesión. Envíe la información del propietario del sitio web y algunos materiales básicos para su revisión y aprobación. Finalmente, inserte el código en la parte inferior de la página web. El efecto es como se muestra en la figura.

---

En este punto, su sitio web personal está en línea correctamente y se implementa en el servidor. ¡El contenido se actualizará continuamente en función de sus comentarios! ! !

Finalmente, ponga la dirección del pequeño sitio web de Jason, bienvenido a visitar jaja >>> El pequeño sitio web de Jason

---

Referencias

Cómo crear un sitio web para un técnico novato

Picgo+Gitee construye una cama con imágenes personal y gratuita