How to Create a Jekyll Personal Website For Designers

Are you a designer looking to showcase your work and create a personal website? Look no further! In this article, you will go through the process of creating a Jekyll-powered personal website tailored specifically for you as a designer.

What is Jekyll?

Jekyll is a popular static site generator that allows you to build fast and efficient websites. It’s perfect for designers who want to focus on their craft without the hassle of managing complex backend systems.

Setting Up Your Jekyll Environment

Before we dive into the process of creating the website, you need to setup your Jekyll environment. First, make sure you have Ruby installed on your computer. Then, open your terminal and install Jekyll by running the following command:

gem install jekyll bundler

Once Jekyll is installed, you can create a new Jekyll project by running:

jekyll new my-personal-website

Navigate to the newly created directory:

cd my-personal-website

Finally, start your Jekyll server:

shell
bundle exec jekyll serve

Customizing Your Website

Now that your Jekyll environment is up and running, it’s time to customize your website to reflect your unique design style. Jekyll uses a combination of Markdown and HTML templates to generate your website’s pages.

Open the _config.yml file in your project’s root directory and modify the settings to match your preferences. You can set your website’s title, description, theme, and other options in this file.

To add your own content, navigate to the _posts directory and create a new Markdown file for each page or blog post you want to add. Jekyll uses a specific naming convention for these files, so make sure to follow it.

Designing Your Website

Jekyll provides a variety of themes and templates that you can choose from to give your website a professional look. You can find free and paid themes on websites like GitHub, Jekyll Themes, and ThemeForest.

To install a new theme, simply download the theme’s files and place them in the _layouts or _includes directory of your Jekyll project. Then, update your _config.yml file to use the new theme.

Once you have your theme set up, you can further customize it by modifying the HTML and CSS files. If you’re comfortable with front-end development, you can add your own styles or tweak the existing ones to match your design preferences.

Building and Deploying Your Website

Once you’re satisfied with the design and content of your website, it’s time to build and deploy it. Jekyll makes this process simple.

To build your website, run the following command:

bundle exec jekyll build

This will generate a static version of your website in the _site directory. You can preview your website locally by running:

bundle exec jekyll serve

To deploy your website, you have several options. You can host it on platforms like GitHub Pages or Netlify, or deploy it to your own web server. Each option has its own set of instructions, so make sure to follow the documentation provided by your chosen hosting platform.

Conclusion

Creating a personal website as a designer has never been easier thanks to Jekyll. With its simplicity and flexibility, you can showcase your work and attract potential clients or employers. Remember to customize your website to reflect your unique design style and regularly update it with new projects or blog posts. Happy designing!