1. Instale VuePress
Primero, ejecute el siguiente comando en la línea de comando para instalar VuePress globalmente:
npm install -g vuepress
2. Inicialice VuePress
Ejecute el siguiente comando para crear un nuevo proyecto de VuePress localmente:
mkdir my-blog && cd my-blog npm init -y npm install -D vuepress
Luego, cree un directorio de documentos en el directorio my-blog y cree un nuevo archivo README.md en él como contenido de la página de inicio.
3. Escribe contenido de blog.
En el directorio de documentos, puede crear varios archivos Markdown para escribir blogs u otro contenido de documentos. VuePress usa Markdown para escribir documentos, puede consultar la sintaxis de Markdown para escribir.
4. Configurar VuePress
Cree un nuevo directorio .vuepress en el directorio raíz del proyecto y cree un archivo config.js para configurar VuePress.
module.exports = { title: 'My Blog', // 博客标题 description: 'This is my blog', // 博客描述 themeConfig: { nav: [ { text: '首页', link: '/' }, { text: '博客', link: '/blog/' }, { text: '关于我', link: '/about/' }, ] } }
En el código anterior, definimos el título y la descripción del blog y configuramos la barra de navegación. Luego, cree dos directorios nuevos, blog y about, en el directorio de documentos, y cree archivos index.md en ellos para mostrar la lista de blogs y el perfil personal.
5. Inicie VuePress
Ejecute el siguiente comando en la línea de comando para iniciar VuePress:
vuepress dev docs
Luego visite http://localhost:8080/ en el navegador y podrá ver el sitio web del blog creado localmente.
6. Implementar un sitio web de blog
Cuando se utiliza VuePress para crear un sitio web de blog, los archivos estáticos generados por la compilación de VuePress deben implementarse en el servidor. Se recomienda utilizar páginas de GitHub para la implementación.
Primero, cree un repositorio con el mismo nombre que el sitio web del blog en GitHub y envíe el código a la rama maestra del repositorio.
Luego, ejecute el siguiente comando en el directorio raíz del proyecto para publicar los archivos estáticos generados al compilar el sitio web del blog en GitHub Pages:
npm run deploy
Tenga en cuenta que antes de ejecutar este comando, debe agregar el script de implementación en package.json de la siguiente manera:
{ "scripts": { "deploy": "vuepress build docs && gh-pages -d docs/.vuepress/dist" } }
Una vez completada la ejecución, podrá ver el sitio web del blog implementado correctamente en la página de configuración del repositorio de GitHub.