Samuel Tucker

Samuel Tucker

1559613387

Setting up Gridsome with GitLab, NetlifyCMS and Netlify

There is really no better set of tools to get up a blog up and running that is fast, free and still provides a great development experience. Here is a link to a demo of what we will be creating

If you are unaware of Gridsome it is the new to the scene static site generator akin to Gatsby that utilizes Vue.js instead of React.

NetlifyCMS is a CMS created by the team over at Netlify. The CMS is relatively low-featured compared to offerings such as Wordpress. But, the shining star of the CMS is that it allows non-technical users to create markdown files in a git repository. Committing markdown files to a Git repository allows your build system to receive notifications about changes to the repository and trigger a new static site build. All without non-technical users ever having to know what Git is.

We’ll be walking through how to get these 2 frameworks and 2 services to work together to create, fast, reliable, static blogs.

Prerequisites

Git

A working Git CLI is required and a UI will make everything much easier. For Windows, install Git For Windows and your preferred Git UI.

Node.js

Node and npm are required and while the documentation does not specify it is probably a good idea to install the latest available LTS version.

Install the Gridsome CLI

// npm
npm i -g @gridsome/cli

//yarn
yarn global add @gridsome/cli

Netlify and GitLab account

If you don’t already have a Netlify and GitLab account you will need to be signed up for those services.

Setup a GitLab repository

This demonstration is based around GitLab but in general, the same steps will apply to other providers and should work with just a few configuration tweaks.

You will need to note the username and project slug in this case drewtown_chi/cat-blog

Create an application to allow the Netlify CMS to authenticate to your GitLab project

When logged into GitLab open your user settings by clicking your avatar in the top right and then hit Settings. Find Applications on the left-hand side.

Provide a name, a redirect URL <a href="http://localhost:8080/admin/" target="_blank">http://localhost:8080/admin/</a> and grant api scope. Finally, click save and note the application ID for later.

Create the Gridsome project and push to Git

Once Node, npm, and the Gridsome CLI are all installed navigate to the directory where your new project will live and run Gridsome’s create command.

grisome create catblog

After a few seconds, once the command has finished, navigate into the directory and run the following commands.

If you haven’t already setup GitLab SSL keys you may need to visit this page and follow the documentation for generating keys. This post does not go into details about how to configure your GitLab account for access via SSH

git init
git remote add origin git@gitlab.com:[Your username]/[Your project slug].git
git add .
git commit -m "Initial commit"
git push -u origin master

If you would like to start running the site locally run gridsome develop from the project folder and then browse to <a href="http://localhost:8080" target="_blank">http://localhost:8080</a> in your browser

Setting up Netlify to pull from the repository

At this point, we have a working Gridsome setup that is pushed to the GitLab repository.

Login to Netlify and navigate to the Sites section of the dashboard where you can click on the New site from Git button.

From here choose GitLab from the Continuous Deployment section and then select the appropriate repository, in this case, “drewtown_chi/cat-blog”.

Now we need to enter our build command gridsome build and our Publish directory dist. Finally, hit Deploy site

Adding Netlify CMS to the Gridsome Project

Install the Netlify CMS and the required Gridsome plugins to your project

npm add netlify-cms gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark

Adjusting gridsome.config.js is next

module.exports = {
  siteName: "Cat Blog",
  plugins: [
    {
      use: "@gridsome/source-filesystem",
      options: {
        path: "post/**/*.md",
        typeName: "Post"
      }
    },
    {
      use: "gridsome-plugin-netlify-cms",
      options: {
        publicPath: "/admin"
      }
    }
  ],
  transformers: {
    remark: {
      externalLinksTarget: "_blank",
      externalLinksRel: ["nofollow", "noopener", "noreferrer"]
    }
  },
};

Now that Gridsome knows about Netlify CMS via the plugins we need to add the CMS to the project.

Create an admin directory within the src folder.

Add the following files to the admin directory: index.html, index.js and config.yml.

index.html Contents

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netlify CMS</title>
</head>
<body>
  <script src="index.js" type="module"></script>
</body>
</html>

index.js Contents

import CMS from "netlify-cms";

config.yml Contents

backend:
  name: gitlab
  repo: [Your username]/[Your project slug]
  auth_type: implicit
  app_id: [App ID from your GitLab repository setup]

media_folder: "static/uploads"
public_folder: "/uploads"

collections:
  - name: "post"
    label: "Post"
    folder: "post"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}

After restarting the Gridsome development environment you should be able to browse to <a href="http://localhost:8080/admin" target="_blank">http://localhost:8080/admin</a> and authenticate via GitLab. Try creating a few test posts that we can use to loop through on the home page.

Querying and showing the blog posts

Gridsome uses GraphQL to query data from the back-end. In order to show the data we need to setup a <page-query> on our Index.vue to query the posts we create from the CMS and iterate through them. You can read more about querying data here.

The following is a basic example of querying all of the posts and using a v-for to loop through the posts to show their title and body contents.

<template>
  <Layout>
     
    <h1>Cat Blog!</h1>
   
    <div v-for="post in $page.posts.edges" :key="post.node.id" class="content">
      <h2>{{post.node.title}}</h2>
      <p v-html="post.node.content">
      </p>
    </div>

  </Layout>
</template>

<page-query>
query Posts {
  posts: allPost {
    edges {
      node {
        id
        title
        content
      }
    }
  }
}
</page-query>

<script>
export default {
  metaInfo: {
    title: 'Hello, world!'
  }
}
</script>

Wrapping up

We’ve got a basic working blog and now it is up to you to style your pages, add additional fields and create templates to show individual posts.

Thanks for reading

#vue-js

What is GEEK

Buddha Community

Setting up Gridsome with GitLab, NetlifyCMS and Netlify
Percy  Ebert

Percy Ebert

1596744840

How GitLab Pages Uses the GitLab API to Serve Content

GitLab Pages allows you to create and host GitLab project websites from a user account or group for free on GitLab.com or on your self-managed GitLab instance.

In this post, I will explain how the GitLab Pages daemon obtains a domain’s configuration using the GitLab API, specifically on GitLab.com.

How does GitLab Pages know where to find your website files?

GitLab Pages is moving to using object storage to store the contents of your web site. You can follow the development of this new feature here.

At the time of writing, GitLab Pages uses an NFS shared mount drive to store the contents of your website. You can define the value of this path by defining the [pages_path](https://docs.gitlab.com/ee/administration/pages/#change-storage-path) in your /etc/gitlab/gitlab.rb file.

When you deploy a website using the pages: keyword in your .gitlab-ci.yml file, a public path artifact must be defined, containing the files available for your website. This public artifact eventually makes its way into the NFS shared mount.

When you deploy a website to GitLab Pages a domain will be created based on the custom Pages domain you have configured. For GitLab.com, the pages domain is *.gitlab.io, if you create a project named myproject.gitlab.io and enable HTTPS, a wildcard SSL certificate will be used. You can also setup a custom domain for your project, for example myawesomedomain.com.

For every project (a.k.a. domain) that is served by the Pages daemon, there must exist a directory in the NFS shared mount that matches your domain name and holds its contents. For example, if we had a project named myproject.gitlab.io, the Pages daemon would look for your .html files under /path/to/shared/pages/myproject/myproject.gitlab.io/public directory. This is how GitLab Pages serves the content published by the pages: keyword in your CI configuration.

Before GitLab 12.10 was released on GitLab.com, the Pages daemon would rely on a file named config.json located in your project’s directory in the NFS shared mount, that is /path/to/shared/pages/myproject/myproject.gitlab.io/config.json. This file contains metadata related to your project and custom domain names you may have setup.

{
  "domains":[
    {
      "Domain":"myproject.gitlab.io"
    },
    {
      "Domain": "mycustomdomain.com",
      "Certificate": "--certificate contents--",
      "Key": "--key contents--"
    }
  ],
  "id":123,
  "access_control":true,
  "https_only":true
}

GitLab Pages has been a very popular addition to GitLab, and over time the number of hosted websites on GitLab.com has increased a lot. On start-up, the Pages daemon would traverse all directories in the NFS shared mount and load the configuration of all the deployed Pages projects into memory. At some point in time, the Pages daemon would take over 20 minutes to load per instance on GitLab.com!

#gitlab #gitlab api #gitlab pages #api

Samuel Tucker

Samuel Tucker

1559613387

Setting up Gridsome with GitLab, NetlifyCMS and Netlify

There is really no better set of tools to get up a blog up and running that is fast, free and still provides a great development experience. Here is a link to a demo of what we will be creating

If you are unaware of Gridsome it is the new to the scene static site generator akin to Gatsby that utilizes Vue.js instead of React.

NetlifyCMS is a CMS created by the team over at Netlify. The CMS is relatively low-featured compared to offerings such as Wordpress. But, the shining star of the CMS is that it allows non-technical users to create markdown files in a git repository. Committing markdown files to a Git repository allows your build system to receive notifications about changes to the repository and trigger a new static site build. All without non-technical users ever having to know what Git is.

We’ll be walking through how to get these 2 frameworks and 2 services to work together to create, fast, reliable, static blogs.

Prerequisites

Git

A working Git CLI is required and a UI will make everything much easier. For Windows, install Git For Windows and your preferred Git UI.

Node.js

Node and npm are required and while the documentation does not specify it is probably a good idea to install the latest available LTS version.

Install the Gridsome CLI

// npm
npm i -g @gridsome/cli

//yarn
yarn global add @gridsome/cli

Netlify and GitLab account

If you don’t already have a Netlify and GitLab account you will need to be signed up for those services.

Setup a GitLab repository

This demonstration is based around GitLab but in general, the same steps will apply to other providers and should work with just a few configuration tweaks.

You will need to note the username and project slug in this case drewtown_chi/cat-blog

Create an application to allow the Netlify CMS to authenticate to your GitLab project

When logged into GitLab open your user settings by clicking your avatar in the top right and then hit Settings. Find Applications on the left-hand side.

Provide a name, a redirect URL <a href="http://localhost:8080/admin/" target="_blank">http://localhost:8080/admin/</a> and grant api scope. Finally, click save and note the application ID for later.

Create the Gridsome project and push to Git

Once Node, npm, and the Gridsome CLI are all installed navigate to the directory where your new project will live and run Gridsome’s create command.

grisome create catblog

After a few seconds, once the command has finished, navigate into the directory and run the following commands.

If you haven’t already setup GitLab SSL keys you may need to visit this page and follow the documentation for generating keys. This post does not go into details about how to configure your GitLab account for access via SSH

git init
git remote add origin git@gitlab.com:[Your username]/[Your project slug].git
git add .
git commit -m "Initial commit"
git push -u origin master

If you would like to start running the site locally run gridsome develop from the project folder and then browse to <a href="http://localhost:8080" target="_blank">http://localhost:8080</a> in your browser

Setting up Netlify to pull from the repository

At this point, we have a working Gridsome setup that is pushed to the GitLab repository.

Login to Netlify and navigate to the Sites section of the dashboard where you can click on the New site from Git button.

From here choose GitLab from the Continuous Deployment section and then select the appropriate repository, in this case, “drewtown_chi/cat-blog”.

Now we need to enter our build command gridsome build and our Publish directory dist. Finally, hit Deploy site

Adding Netlify CMS to the Gridsome Project

Install the Netlify CMS and the required Gridsome plugins to your project

npm add netlify-cms gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark

Adjusting gridsome.config.js is next

module.exports = {
  siteName: "Cat Blog",
  plugins: [
    {
      use: "@gridsome/source-filesystem",
      options: {
        path: "post/**/*.md",
        typeName: "Post"
      }
    },
    {
      use: "gridsome-plugin-netlify-cms",
      options: {
        publicPath: "/admin"
      }
    }
  ],
  transformers: {
    remark: {
      externalLinksTarget: "_blank",
      externalLinksRel: ["nofollow", "noopener", "noreferrer"]
    }
  },
};

Now that Gridsome knows about Netlify CMS via the plugins we need to add the CMS to the project.

Create an admin directory within the src folder.

Add the following files to the admin directory: index.html, index.js and config.yml.

index.html Contents

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netlify CMS</title>
</head>
<body>
  <script src="index.js" type="module"></script>
</body>
</html>

index.js Contents

import CMS from "netlify-cms";

config.yml Contents

backend:
  name: gitlab
  repo: [Your username]/[Your project slug]
  auth_type: implicit
  app_id: [App ID from your GitLab repository setup]

media_folder: "static/uploads"
public_folder: "/uploads"

collections:
  - name: "post"
    label: "Post"
    folder: "post"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}

After restarting the Gridsome development environment you should be able to browse to <a href="http://localhost:8080/admin" target="_blank">http://localhost:8080/admin</a> and authenticate via GitLab. Try creating a few test posts that we can use to loop through on the home page.

Querying and showing the blog posts

Gridsome uses GraphQL to query data from the back-end. In order to show the data we need to setup a <page-query> on our Index.vue to query the posts we create from the CMS and iterate through them. You can read more about querying data here.

The following is a basic example of querying all of the posts and using a v-for to loop through the posts to show their title and body contents.

<template>
  <Layout>
     
    <h1>Cat Blog!</h1>
   
    <div v-for="post in $page.posts.edges" :key="post.node.id" class="content">
      <h2>{{post.node.title}}</h2>
      <p v-html="post.node.content">
      </p>
    </div>

  </Layout>
</template>

<page-query>
query Posts {
  posts: allPost {
    edges {
      node {
        id
        title
        content
      }
    }
  }
}
</page-query>

<script>
export default {
  metaInfo: {
    title: 'Hello, world!'
  }
}
</script>

Wrapping up

We’ve got a basic working blog and now it is up to you to style your pages, add additional fields and create templates to show individual posts.

Thanks for reading

#vue-js

Queenie  Davis

Queenie Davis

1623320299

Why Did GitLab Acquire UnReview?

Last week, open-source DevOps lifecycle platform GitLab acquired machine learning (ML) startup UnReview for an undisclosed amount. UnReview automatically recommends appropriate code reviewers for pull requests of GitLabGitHub and BitBucket projects.

GitLab is a collaboration tool for software developers and DevOps. Started in 2014, GitLab Inc. has more than 1,300 remote team members spread across 68 countries. Currently, the platform consists of thousands of developers and has about 30 million+ users (both paid and free), from startups to global enterprises.

“Integrating UnReview into the GitLab platform marks our first step in building GitLab’s applied ML for DevOps,” said Eric Johnson, CTO of GitLab.

Further, he said incorporating machine learning into GitLab’s DevOps platform improves the UX by automating workflows and compressing cycle time across all areas of the DevSecOps lifecycle. “We are also building new MLOps features to empower data scientists,” he added.

GitLab said the UnReview technology would be integrated into the GitLab code review experience for SaaS customers by the end of 2021.

Why GitLabs acquired UnReview?

Accelerating development cycles while ensuring the highest quality code is one of the most common challenges DevOps teams face today. AI/ML tools such as UnReview, Tabnine (formerly Codota), DeepchecksGranulate, help fast track DevOps cycles by anticipating what developers need in advance.

According to Gartner, 40% of DevOps teams are expected to be using application and infrastructure monitoring apps that have integrated artificial intelligence for IT operations (AIOps) by 2023. Also, an enterprise using AI-based tools reduces review time by over 50%, revealed Delloite, in a report ‘AI-assisted software development.’

As per GitLab’s 2021 DevSecOps survey, 75% of respondents said their DevOps teams are planning to use ML/AI for testing and code review. The study revealed nearly 55% of operations teams said their DevOps life cycles were either completely or mostly automated.

Jim Mercer, research director DevSecOps and DevOps at global market intelligence firm IDC, said, DevOps teams can capitalise on cloud solutions that provide machine learning to remove friction from the DevOps pipeline, optimising developer productivity.

**GitLab’s applied machine learning for DevOps: **

  • With the integration of UnReview into GitLab’s platform, the platform will enrich machine learning capabilities to speed up the software development lifecycle.
  • Using UnReview’s machine learning algorithm, the merge request reviewers feature will be accelerated from a primarily manual process to an automated process. This will be extended to automate other workflow tasks like GitLab Epics soon.
  • Improves experience with more intelligent machine learning backed features to automate portfolio management within the manage and plan stages.

#opinions #gitlab integrates unreview #gitlab latest #unreview gitlab

Matt  Towne

Matt Towne

1595396280

Netlify Serverless Functions with Netlify Dev

It’s never been easier to create Serverless Functions. With Netlify, you can create and deploy Serverless Functions in minutes! In this video, I’ll show you how to run your Netlify Serverless Functions locally using the Netlify CLI and Netlify Dev command.

#serverless #netlify #netlify dev

Ahebwe  Oscar

Ahebwe Oscar

1633537020

How to Deploy Django to AWS EC2 with Docker and GitLab 2021

In this tutorial, we'll look at how to configure GitLab CI to continuously deploy a Django and Docker application to Amazon Web Services (AWS) EC2.

By the end of this tutorial, you will be able to:

  1. Set up a new EC2 instance
  2. Configure an AWS Security Group
  3. Install Docker on an EC2 instance
  4. Set up Passwordless SSH Login
  5. Configure AWS RDS for data persistence
  6. Deploy Django to AWS EC2 with Docker
  7. Configure GitLab CI to continuously deploy Django to EC2

#gitlab #gitlab #aws #docker