Recently, the Nuggets had an event called project review, and I thought I had been doing front-end Tech week for a month, so I came to share my project experience.

First, post the Github address of the project: shfshanyue/weekly, a static website composed of Gatsby and several handwritten scripts.

This is a recent project that Shanyue is working on: Front End Technology Week. It aims to be the most professional front end weekly in the industry that every developer can take a casual look at.

This project can be regarded as a content – oriented and technology-assisted product. In fact, for a content product, the technical form is not very important. (So for independent bloggers, don’t worry about which SSG tool to use.)

Even so, I still spent some time watching Gatsby by fire and made a richer display of the weekly.

So let’s go through the evolution of this project

origin

Looking at the development history of the front end from the front end weekly, this is a good perspective, even the late entrants can roughly see the context of the front end development. In 2015 there were a lot of Gulp articles, and in 2016 Webpack was famous. A year or five years ago, half of weekly magazines were in CSS. Now CSS can be seen only once every few weeks.

In addition, the following questions are frequently asked in many technical communities

  1. What tools are available to improve development efficiency?
  2. For the new version of the React/Vue/Node/TypeScript, what do you think of these new features?
  3. Tailwindcss/Vite is hot these days, what are these things?

Based on the contradiction between the vast number of front-end developers’ thirst for technology and 996’s lack of time consumption, I developed a product: Front-end Weekly. But whether there is demand, but also through adequate research

research

There are dozens of front-end weekly teams at home and abroad, and the details are as follows

  1. Javascript Weekly, sharing hot technical articles, release releases, great libraries and tools, and work on JS for the week
  2. Node Weekly, as above, but in a different direction
  3. React Status, as above
  4. CSS Weekly, as above

(The UI of the first three weekly magazines is the same, maintained by a team) Foreign weekly magazines have many advantages, strong professionalism, regular release of long-term maintenance, the following advantages worth learning

  1. Have a separate website. You can view the latest issue and all the issues of history in real time on the relevant website
  2. Subscribe to the system. Email subscription and RSS subscription
  3. Update continuously at a fixed time
  4. Professional Team Maintenance
  5. Clear categorization

Home also has a few, but quality is uneven, distance from abroad gap is bigger. Although most of them are released by big factories, most of them are maintained by amateurs, and the quality is uneven. From this point of view, it is feasible to look at foreign weekly and do a domestic front-end weekly.

The development of

Gatsby, the most popular static website building tool, was used as the technology stack for this weekly report. After comprehensive use, Gatsby felt very good, and optimized SEO, packaging and network performance to the extreme. In addition to dependencies that are hard to download, in addition to too many plug-ins that are hard to maintain.

Choose a good template. The following template is best for this kind of static content

git clone [email protected]:gatsbyjs/gatsby-starter-blog.git
Copy the code

Weekly content needs to be parsed into tool classes, article classes, and library package classes, so it cannot be maintained with Markdown.

Eventually, yamL maintenance weekly was chosen and a script was used to build multiple Markdowns. If you are interested, go to Github and check out the code: shfshanyue/weekly

Finally write the first page and blog page using React: SRC /templates/blog-post.js

<article
  className="blog-post"
  itemScope
  itemType="http://schema.org/Article"
>
  <header>
    <h1 itemProp="headline">{post.frontmatter.title}</h1>
    <p>{post.frontmatter.date}</p>
  </header>
  <section
    dangerouslySetInnerHTML={{ __html: post.html }}
    itemProp="articleBody"
  />
  <hr />
  <footer>
    <Bio />
  </footer>
</article>
Copy the code

The data about blog pages is provided by GraphQL, and the Logics for bulk build pages are called by the createPages hook in gatsby-node.js

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  // Define a template for blog post
  const blogPost = path.resolve(`./src/templates/blog-post.js`)

  // Get all markdown blog posts sorted by date
  const result = await graphql(
    ` { allMarkdownRemark( sort: { fields: [frontmatter___date], order: ASC } limit: 1000 ) { nodes { id fields { slug } } } } `
  )

  const posts = result.data.allMarkdownRemark.nodes

  if (posts.length > 0) {
    posts.forEach((post, index) = > {
      const previousPostId = index === 0 ? null : posts[index - 1].id
      const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id

      createPage({
        path: post.fields.slug,
        component: blogPost,
        context: {
          id: post.id,
          previousPostId,
          nextPostId,
        },
      })
    })
  }
}
Copy the code

advantage

Why subscribe to this front end weekly? How is this weekly different from others?

So I summed up the advantages of this weekly compared with other domestic weekly

  1. Have an independent website: weekly.shanyue.tech
  2. Multi-platform push: it will be released weekly on Digg and Zhihu platforms
  3. RSS feeds
  4. Constant update: It will be released every Monday at 9am
  5. Read the post several times and summarize it with pictures and pictures, not with cut-out descriptions
  6. The content is rich, and the push is classified into five categories: one-sentence technical summary, technical article, version release, excellent library and tool recommendation, and extracted from the perspective of using technology for each category

The user

B: well… I have just done three issues, but there are not many users at present. I hope that with the increasing number of issues, the weekly will attract more users.

conclusion

So how do you do a front-end technology weekly? I guess it’s just, you know, you don’t have to. Finally, I look forward to your attention.