/jekyll-self-build

My portfolio

Primary LanguageHTML

daan.vanramshor.st

Start development environment

To launch a live Jekyll server, you can follow these steps:

  1. Open a terminal or command prompt on your computer.
  2. Navigate to the root directory of your Jekyll project using the cd command.
  3. Run the following command to launch the Jekyll server:
$ bundle exec jekyll serve

This will build your Jekyll site and launch a local web server at http://localhost:4000/. You should see output in the terminal indicating that the server is running.

  1. Open a web browser and navigate to http://localhost:4000/ to view your Jekyll site. You should see the site rendered as it would appear when deployed.
  2. As you make changes to your Jekyll project, the site will automatically rebuild and refresh in your web browser. This makes it easy to see your changes in real-time as you work.

To stop the server, simply press Ctrl+C in the terminal or command prompt where the server is running.

Jekyll tips

Jekyll default variables exemples

{
  "site": {
    "title": "My Jekyll Site",
    "description": "A description of my site",
    "url": "https://www.example.com",
    "baseurl": "/",
    "author": {
      "name": "John Doe",
      "email": "john@example.com"
    },
    "posts": [
      {
        "title": "My First Post",
        "url": "/my-first-post",
        "date": "2023-03-10 10:00:00 -0500",
        "categories": [
          "Category 1",
          "Category 2"
        ],
        "tags": [
          "tag1",
          "tag2"
        ],
        "excerpt": "This is the excerpt of my first post.",
        "content": "This is the full content of my first post."
      },
      {
        "title": "My Second Post",
        "url": "/my-second-post",
        "date": "2023-03-11 10:00:00 -0500",
        "categories": [
          "Category 3",
          "Category 4"
        ],
        "tags": [
          "tag2",
          "tag3"
        ],
        "excerpt": "This is the excerpt of my second post.",
        "content": "This is the full content of my second post."
      }
    ],
    "pages": [
      {
        "title": "About",
        "url": "/about",
        "content": "This is the content of my about page."
      },
      {
        "title": "Contact",
        "url": "/contact",
        "content": "This is the content of my contact page."
      }
    ],
    "categories": {
      "Category 1": [
        {
          "title": "My First Post",
          "url": "/my-first-post"
        }
      ],
      "Category 2": [
        {
          "title": "My First Post",
          "url": "/my-first-post"
        }
      ],
      "Category 3": [
        {
          "title": "My Second Post",
          "url": "/my-second-post"
        }
      ],
      "Category 4": [
        {
          "title": "My Second Post",
          "url": "/my-second-post"
        }
      ]
    },
    "tags": {
      "tag1": [
        {
          "title": "My First Post",
          "url": "/my-first-post"
        }
      ],
      "tag2": [
        {
          "title": "My First Post",
          "url": "/my-first-post"
        },
        {
          "title": "My Second Post",
          "url": "/my-second-post"
        }
      ],
      "tag3": [
        {
          "title": "My Second Post",
          "url": "/my-second-post"
        }
      ]
    }
  },
  "page": {
    "title": "My First Post",
    "url": "/my-first-post",
    "layout": "post",
    "categories": [
      "Category 1",
      "Category 2"
    ],
    "tags": [
      "tag1",
      "tag2"
    ],
    "excerpt": "This is the excerpt of my first post.",
    "content": "This is the full content of my first post."
  }
}