Creating posts in Visual Studio

Hi

At the moment I am trying to create my first website, using Visual Studio Code.
And I wonder what I can do to create single posts, with clickable headlines, so that the user/visitor is sent to a single post? And how that is done in Visual Studio Code that is.
Sort of like how it works in Wordpress. In Wordpress the user clicks on a post and then gets sent to that specific post, which has its own text and images unique to that post.
Right now I can create a homepage but I don’t quite know how to create single posts that has its own part(space) in the website.

Thanks

In a similar fashion like this forum? where there is a list of topics, and if you click on a topic, you get taken to that specific topic?

you could make a page for every single post, but this becomes very tedious.

There is a lot more complexity behind wordpress and websites like codecademy discuss then that meets the eye.

A database is used to store each post
a back-end programming language (php for wordpress) is used, but there are many alternatives here
when a post is clicked, a request is made to a webserver, which communicates with your back-end programming language.

the back-end programming language then contains application logic, which comes back with the right post based on an identifier (id).

so there are many layers here working with each other.

1 Like

Hmm ok :+1:

So how can I do this in Visual Studio code without using Wordpress/Local?

I am doing this as an exercise to learn how to create several pages/posts in Visual Studio code.

Any ideas how to make this? For example with Javascript or something?

Also, is PHP normally used outside of Wordpress-programming as well? As for example in a case like this, when everything is made through Visual studio.

Visual studio code is just a text-editor, allowing you to write code in multiple languages

you need to see that you will need other tools, programs and programming languages to achieve what you want

Got plenty experience, which also is a problem. There are dozens of ways to do this. You might want to find a tutorial to help you with this

yea, PHP is a possibility, one of many. PHP is common with apache and Mysql (known as LAMP stack).

Hmm ok.

Any ideas on tutorials for this? I am currently looking at this tutorial: https://www.youtube.com/watch?v=QA0XpGhiz5w

But I want to take it one step further and try to create individual posts in Visual Studio for my website. But I don’t understand quite how.

you could make a a index.html file, which contain all posts and then make a html file for each post and simple use an anchor element (<a>) to point the individual pages. so the post show page could then be: first_page.html, then in index.html you can do <a href="first_page.html">my first blog post</a>

or do you want to make this process dynamic? Where you or users can information input fields which result in a new page?

Hmm ok interesting idea.

So the first post could have a file-name that is called, for example, first_page.html? And then headlines on the homepage(index.html) could point towards that post through a-links tags?(A=hrefs)

Is this a scalable solution? I mean would this solution make the website very slow, if it becomes very large, with many posts in it? Or does it not matter?

No I don’t think I want to make it dynamic in that kind of way. I want it to look like an ordinary homepage, but where you can click on the posts and then be redirected to that post(or page), through a link.

Another question completely: I know when you are trying to create websites in Wordpress, often PHP is used for what I am now trying to do here in Visual Studio. But when creating websites through Visual Studio alone, I guess PHP is never used right? It is mostly used when coding in Wordpress (using Local for example) right?

That simply involves having static pages that host the content, but use the style and HTML template of the site. This is where dynamics come in.

Consider that the server-side logic has a bare template of the static content of the page, layout, skin graphics, etc. The request header contains the page id (if dynamic) and the handler attempts to retrieve the data to match the id. The template is set up to have this data inserted in the appropriate elements and the finished HTML response document is sent back. The output from the server is a static page that has been generated on the server.

For now, just create a bare bones page layout and create copies of it using the page names…

index.html
about.html
contact.html

and so on. Set the links to those URLs and give each page unique content. They should all load the same stylesheet.

<link rel="stylesheet" href="style.css">

Hmm ok. Thank you.

Should every HTML-page/post begin the same way as the index.html-file does? Namely like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>"

Or should the html-posts/pages that are below the index.html in rank begin somewhat differently in the output of code?

Also, I wonder about SVGs…

I have downloaded some free images with no copyright demands from certain websites. But they are JPEGs. And when I am trying to convert these to SVGs they start to appear in black and white, and gets completely wrecked basically.

Any idea on how to ideally convert a JPEG to an SVG, so that it works when you upload it to your text-editor? Should it always be done in certain programs like GIMP or Illustrator? Or could it just as well be converted quickly in an online converter somewhere?

I don’t know if SVGs are always better than JPEG(?). But I see most tutorials on youtube, and the web, are calling for SVGs when designing websites. Could someone please explain why that is, to a noob like me? Why is SVGs ideal over JPEG?

All the pages should be the same in terms of basic structure, such as you have above. Design the basic layout with navigation and content areas, footer, etc. Once you have working layout, make copies and same them as your other pages.

SaveAs about.html
SaveAs contact.html

That way they will all have the same layout in common. Then fill out the unique content of each page as desired.

JPEG is rasterized and not very easy to convert to vector graphics. What happens if you set the quality to 100% and save as a PNG, then try to convert that?

Hmm ok :+1:

In what program do you change the quality, before you try to convert to SVGs?

I tried to reduce the scale/size of the image a bit and then to convert. But I still get black and white output, even when I do this with a PNG.

I use GIMP2; export as PNG with highest quality. Not sure this will work though given that JPEG is not a vector format.

That did not work unfortunately :slight_smile: Still black and white after doing that.

Any other idea? :slight_smile: I am going to do this one way or another :slight_smile: