从零打造牛马程序员官网教程(1)

牛马程序员官网使用 vitepress 来搭建，进入官网,你可以在官网查看到详细的文档，也可以看看我们这里的最佳实践

TIP

前置条件，你需要在你的电脑上安装 nodejs 环境，nodejs 官网: https://nodejs.org/en

如果你对 nodejs 不是太熟悉，可以查看我们的官方收费教程，https://nodeing.com

初始化工作

创建一个项目目录，例如：niuma-template，你可以根据你自己的需求来自定义,我们以下的操作都是基于命令行工具进行

mkdir niuma-template

然后进入到项目目录，初始化项目

cd niuma-template

npm init -y

接下来，初始化 git 仓库

git init

你需要去创建一个 git 仓库，然后把远程仓库地址添加进去，创建 git 仓库的步骤我这里不演示了，如果对 git 不熟的新手，可以来找我拿教程，微信：Michael-Niuma

接下来，添加远程仓库地址，我这里事先已经创建好了仓库地址，我就直接使用了

git remote add origin git@github.com:nodeing/niuma-template.git

注意哈，上面我添加的地址是 git@github.com:nodeing/niuma-template.git 这个地址需要改写成你自己的仓库地址，仓库地址设置完成后，可以通过命令验证是否添加成功

git remote -v

输出结果

到此为止，我们的初始化工作完成

hello world

我们开始安装 vitepress 把项目先跑起来

第 1 步，安装 vitepress 依赖

npm i vitepress -D

第 2 步，创建目录结构

niuma-template
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ article
│  │  └─ index.md
│  └─ index.md
└─ package.json

第 3 步，在创建的文件里面编写具体的内容

config.js

import { defineConfig } from 'vitepress'
// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: '牛马程序员',
  description: '这里是牛马程序员官网',
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    // 配置导航
    nav: [
      { text: '首页', link: '/' },
      { text: '文章', link: '/article/index.html' }
    ],
    socialLinks: [
      { icon: 'github', link: 'https://github.com/nodeing/niuma-template' }
    ]
  }
};

上面文件中，我们配置了导航、标题和描述信息

article/index.md

# 文章导航

这里是文章导航

docs/index.md

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: '乾坤未定，你我皆牛马'
  text: ''
  tagline: 牛马程序员官网
  image:
    src: /logo.png
    alt: 牛马程序员
  actions:
    - theme: brand
      text: 去学习
      link: /article/

features:
  - title: 完全免费
    details: 本站所有内容完全免费，欢迎点赞分享
  - title: 手把手教学
    details: 每个步骤都给你截图演示，学习无压力
---

第 4 步，创建启动脚本

修改 package.json 文件，增加配置如下：

  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs"
  },

第 5 步，启动测试

npm run dev

启动后，会给出一个访问链接

我们打开链接，在浏览器访问如下：

到此为止，我们项目已经可以初步跑起来了

其他细节

当前我们的 logo 是没有办法显示的，我们需要先把 logo 显示出来

在 docs 目录下，新建 public 文件，然后准备一个 logo 放进来

目录结构调整为：

niuma-template
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ article
│  │  └─ index.md
│  ├─ public
│  │  └─ logo.png
│  └─ index.md
└─ package.json

我们再次去浏览器访问，logo 已经可以展示出来了

接下来，就是把浏览器图标也修改一下， 当前我们的图标是这样的

这看上去不太好看，我们去制作一个 ico 图标， 这里可以随便搜索一个 ico 图标在线制作网站即可完成，我这里先放出来一个，如果链接失效，大家下来自行搜索，点击进入，ico 图标制作

制作极其简单，上传一个图片，生成图标即可，但是需要注意的是你生成的图标命名，一定要叫做 favicon.ico

接下来，把这个 favicon.ico 的图标放到 public 目录下即可

我们再次去浏览器访问，就可以看到图标展示出来了

注意：如果你的没有生效，尝试强制刷新浏览器，或者重启服务再次访问

git 提交

在项目目录下，新增.gitignore 文件，并填写内容

node_modules
docs/.vitepress/dist
.DS_Store
docs/.DS_Store

接下来提交代码

git add .
git commit -m "项目初始化"
git push origin main