Sharing Top Content from the Angular-sphere.

Building a static blog using Gatsby and Strapi – Hacker Noon

  • Halfway between a Node.js Framework and a Headless CMS, it saves weeks of API development time.Thanks to its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication Permissions management, Content Management, API Generator, etc.Unlike others CMSs, Strapi is 100% open-source, which means:Strapi is completely free.You…
  • We can start developing the static website.Install GatsbyFirst, install Gatsby CLI:$ npm install –global gatsby-cliGenerate a Gatsby projectIn the folder gatsby-strapi-tutorial that you previously created, generate your brand new blog:$ gatsby new blogStart in development modeEnter in your project’s folder:$ cd blogStart the server:$ gatsby developAt this point, you should already…
  • jsmodule.exports = { siteMetadata: { title: `Gatsby Default Starter`, }, plugins: [ `gatsby-plugin-react-helmet`, { resolve: `gatsby-source-strapi`, options: { apiURL: `http://localhost:1337`, contentTypes: [ // List of the Content Types you want to be able to request from Gatsby.
  • /p ul = ( li key={document.node.id} h2 Link /h2 p{document.node.content}/p /li ))} /ul Link to=”/page-2/”Go to page 2/Link /div)export default IndexPageexport const pageQuery = graphql` query IndexQuery { allStrapiArticle { edges { node { id title content } } } }`What are we doing here?At the end of the file,…
  • This is called once the// data layer is bootstrapped to let plugins create pages from data.exports.createPages = ({ boundActionCreators, graphql }) = { const { createPage } = boundActionCreators; const getArticles = makeRequest(graphql, ` { allStrapiArticle { edges { node { id } } } } `).

A static website contains Web pages with fixed content. Technically, it is a simple list of HTML files, which displays the same information to every visitor. Unlike dynamic websites, they do not…

Building a static blog using Gatsby and StrapiIntroductionA static website contains Web pages with fixed content. Technically, it is a simple list of HTML files, which displays the same information to every visitor. Unlike dynamic websites, they do not require any back-end programming or database. Publishing a static website is easy: the files are uploaded on a simple Web server or storage provider. The two main advantages of static websites are security and speed: there is no database so it can not be hacked and there is no need to render a page for each request, which makes Web browsing faster.To make their creation easier, numerous open-source static websites generators are available: Jekyll, Hugo, Hexo, etc. Most of the time, the content is managed through static (ideally Markdown) files or a Content API. Then, the generator requests the content, injects it in templates defined by the developer and generates a bunch of HTML files.Progressive Web Apps (PWA) are web applications, highly based on JavaScript, and are reliable, fast and engaging. Since they make web browsing much faster and offer a better user experience, PWA have become the default way to build Web interfaces. Thus, many amazing front-end frameworks appeared over the last couple years: Angular, Vue and more recently, React.Gatsby: when static websites meet Progressive Web AppsStatic websites and PWA both have strong advantages which make us crave for a way to use them both in the same project! Luckily, we have tools that bridge the gap between them and the…

Building a static blog using Gatsby and Strapi – Hacker Noon