My First Dev Blog Ever?!
This project was challenging for me because it was training a muscles I've always struggled with: reading development docs. With these projects I think most of my strengths comes from my designs and then I sort of hodge-podge my way throuigh development.
With this project however, I had to actually deep dive into the frameworks being used. I do think elventy is quite forgiving in nature that it wasn't too painful. So how did I create my blog site?:
Inspirations
-
Design:
-
I think the part of this project that came the easiest to me was the design. Typically when I am creating a project, I look for inspirations on Pinterest in particular. In the past I would create a pinterest board of my inspirations, but I recently go into using are.na and instead linked my inspiration in a collection. I like this new method because it allows me to compose all my inspirations links into one file.
-
- --This is my Project 1 collection--
- --This is my Project 1 collection--
-
I knew I wanted my blog to have a brutatlist/gridded design to it. I like the blocking look to many of the blogs I can across. Where the site navigations were separated from the main content of the site. I also thought this gridded look would play into the computer/ code syntax of development. So my blog matched the themed both in look and feel.
-
I built a wireframe using Figma based on the design inspiration I collected. I watched the quick eleventy tutorial and it helped me weed through all the files that were on the repo we first cloned. I realized that I could easily inport the design I made into my blog post. So it made designing the site easi
Development
-
Eleventy
- Like mentioned before, when I first started developing my blog, I first watched the quick quick eleventy tutorial that was shared with us. I think those 6 minutes helped me understand the framework in its most basic form. So I started chaning/ deleting files in my project that I didn't need based on the video and the eleventy website's tutorials. That started with me cleaning out the index.njk and base.njjk pages.
-
Nunjucks (njk)
- Njk was kind of similar to handlebars which made it a little easy to get through. But if I'm being totally honest. I just tried to match the look my code to the look of the template code we were given. I worked out of this VS file and another so that I would mess with this version too much. Once I felt the njk files matched the original html layout I had I felt satisfied. I definitely still need to understand njk more though.
-
Markdown Syntax
- I worked with markdown language in the past with Readme files but I lot of the times they were templates that I would just have to insert my answers into. But, that small exposure to the language still helped in navigating through it. I also learned that Eleventy allows for html syntax as well so anything I could find in my Markdown cheetsheet I just used html to fix instead.
Challenges
-
Majority of the challenges in this project came from the learning curve of understanding njks and Eleventy. I watched a lot of youtube videos (linked in the are.na collection) and picked apart the example sites on the eleventy website. If I am being honest, hwoever, alot of it was just replaicng things on screen and seeing what happened. If nothing happened or an error would pop up in the terminal I'd just undo it the change I made. Slowly but surely I started to get the hang of which files did what.
-
In the end, there were some things I my original design that I had to give up on for the sake of not breaking the site. For isntance, in the sidebar under the categorie section, the user shoud have been able to filter through the post I had based on the tags of the post. I couldn't figure out how to do that using the metadata so I just sits there until I am able to give it another go.
I did use claude to help me get my css file to show. It mainly helped with the file organization.