从零开始编写博客网站:初始化Next.js项目

作者 : IT 大叔 本文共2119个字,预计阅读时间需要6分钟 发布时间: 2020-11-9

教程
本教程系列向您展示如何创建一个与我的网站类似的博客:https : //newcurrent.se,以及如何将其托管在GitHub Pages上,尽管它不会被锁定托管在GitHub Pages上,但结果将是一个能够静态导出并托管在任何地方的网站。

我过去发表过一篇文章,描述了如何使用Sapper创建博客,但是我决定迁移到该网站,Next.js因为我更了解React,并且想尝试一些新的东西。我过去曾经使用过Gatsby,所以我想,为什么这次不尝试Next.js。


先决条件

您不需要太多的编程经验即可学习本教程,除非您具有一些HTML,CSS和JavaScript知识以及一些如何React工作的知识,否则我不会推荐本系列教程。重点将更多地放在如何Next.js帮助我们建立博客上,而不是如何React帮助我们做博客。您还将期望如何使用GitHub创建存储库。

除此之外,您真正需要的就是一个node足以支持它的版本npx和一个GitHub帐户。

我将yarn用于此项目,但也可以使用npm。语法略有不同,但通常yarn不需要指定run运行内容,请参见以下示例:

复制
yarn dev
# is the same as
npm run dev

让我们开始吧😊


初始化项目

要初始化一个新Next.js项目,我们要做的就是运行以下代码:

复制
npx create-next-app my-blog
cd my-blog

这将在名为my-blog(您可以随意命名)文件夹中创建一个项目,并设置该项目所需的所有基础知识,然后将工作目录更改为my-blog

如果您想尝试运行该应用程序,可以通过运行yarn devnpm run dev访问http:// localhost:3000来进行


文件概述和演练

让我们看看create-next-app为我们创建的文件和目录树:

从零开始编写博客网站:初始化Next.js项目插图

。下一个

包含Next.js框架所需的文件。无需触摸此文件夹。

node_modules

包含我们项目的依赖项。无需触摸此文件夹。

页数

Next.js使用此文件夹。它在这里查看我们的JavaScript文件,以确定页面中的路由是什么样的以及它们如何工作。我们将在页面的下方更详细地介绍这一点。这是Next.js项目中使用的主要文件夹。

上市

在这里,您可以将所有想要的东西静态地放置在托管站点上,例如图像和图标。

样式

将此文件夹用于全局CSS样式表和CSS模块。您可以Home.module.css从此文件夹中删除文件,因为我们不会使用它。

这些是Next.js项目中的文件夹,我们可能稍后会创建一个组件目录,在此我们可以组织React组件,但目前仅此而已。让我们浏览一下pages文件夹的内容。

页面文件夹

首先,让我们删除该api文件夹,我们不需要。

让我们来看看在_app.jsindex.js有点接近,他们是非常重要的。

_app.js

_app.js 看起来像这样:

复制
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

似乎是无害的,并且它处于此阶段。该_app.js是在定义的所有网页执行pages的目录,它被传递给MyApp函数的Component参数,并在这里进行访问。我们将MyApp在本系列教程的另一部分中使用该组件来定义要在所有页面上显示的内容,例如页眉和页脚。目前,此代码什么也不做,只是返回处理后的页面。

index.js

index.js还有更长的篇幅,我们实际上将删除其中的大部分,index.js在继续本教程的下一部分之前,您希望自己看起来像这样:

复制
export default function Home() {
  return "Home sweet home";
}

index.js当我们访问网站的根目录时,将提供此文件。通过运行开始您的项目yarn dev,然后访问http:// localhost:3000 /,您应该看到一个基本的网站,上面写着Home sweet home


将我们的项目添加到GitHub

仅将代码存储在本地并不安全,也不是一个好习惯,让我们在GitHub上创建一个存储库并将代码推送到那里。由于这是前提条件之一,因此我假设您已经知道如何执行此操作。只要确保您创建的项目是一个空项目,并且未使用任何文件(例如README.md或许可证文件)进行初始化即可。

创建GitHub帐户后,请按照其提供的步骤进行操作:

复制
git remote add origin git@github.com:<your_username>/<your_github_project>.git
git branch -M main
git push -u origin main

现在,我们已经完成了基本Next.js设置,并准备好进行本系列教程的下一部分。

这是我的项目在现阶段的样子:https : //github.com/simon-nystrom/nextjs-blog-example/tree/p1

希望您能继续学习本教程,请随时询问您是否有任何疑问,或者告诉我是否错过了什么!

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 从零开始编写博客网站:初始化Next.js项目

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论