c++編寫托管dll

本教程適用于誰(shuí)？ (Who is this tutorial for?)

• This tutorial assumes no prior knowledge and is suitable for complete beginners as a first project
  本教程假定您沒(méi)有先驗(yàn)知識(shí)，并且適合初學(xué)者作為第一個(gè)項(xiàng)目

您將需要什么 (What you will need)

• a GitHub account (if you already have one set up, skip step 1)

  一個(gè)GitHub帳戶(如果已經(jīng)設(shè)置了一個(gè)帳戶，請(qǐng)?zhí)^(guò)步驟1)

• a Netlify account
  一個(gè)Netlify帳戶

• a code editor (for this tutorial I used Visual Studio Code)

  一個(gè)代碼編輯器(對(duì)于本教程，我使用了Visual Studio Code )

• terminal app
  終端應(yīng)用
• approximately 1–2 hour
  大約1-2小時(shí)

讓我們開(kāi)始吧！ (Let’s get started!)

步驟1：注冊(cè)GitHub帳戶。 (Step 1: Sign up for a GitHub account.)

What exactly is GitHub? The Git in GitHub is a version control system, so that every time anything changes in our code, that change is tracked. This lets you trace everything you’ve ever written and changed within a project and revert back to an old version of your code if you need to. Git on its own is a command-line tool. GitHub is where it all comes together. It’s where we can store our projects, track all our work and code changes, as well as network with other developers (and check out their projects!).

GitHub到底是什么？ GitHub中的Git是一個(gè)版本控制系統(tǒng)，因此每當(dāng)我們的代碼中發(fā)生任何更改時(shí)，都會(huì)跟蹤該更改。 這樣，您就可以跟蹤您在項(xiàng)目中編寫和更改的所有內(nèi)容，并在需要時(shí)還原為舊版本的代碼。 Git本身就是一個(gè)命令行工具。 GitHub是所有功能的結(jié)合體。 在這里，我們可以存儲(chǔ)我們的項(xiàng)目，跟蹤我們的所有工作和代碼更改，以及與其他開(kāi)發(fā)人員建立聯(lián)系(并檢查他們的項(xiàng)目！)。

步驟2：建立新的GitHub存放區(qū) (Step 2: Create a new GitHub repository)

It’s good practice to initialize your project with a README file. In this file, you can put some information about your project so that anyone who is interested can understand what the project is and how to make sense of the project files.

最好使用README文件初始化項(xiàng)目。 在此文件中，您可以放入有關(guān)項(xiàng)目的一些信息，以便任何感興趣的人都可以了解項(xiàng)目是什么以及如何理解項(xiàng)目文件。

步驟3：將存儲(chǔ)庫(kù)克隆到計(jì)算機(jī)上 (Step 3: Clone your repository on to your computer)

• Click on “Clone or download” and copy the HTTPS URL
  單擊“克隆或下載”并復(fù)制HTTPS URL

• Open up your terminal (on a mac just hit the search icon and type Terminal)

  打開(kāi)終端(在Mac上，只需點(diǎn)擊搜索圖標(biāo)，然后輸入Terminal )

The Terminal is the interface to the underlying operating system of our computer. It is a command line. From here we can do a bunch of cool things. But for now, let’s navigate to where we want to keep our project files and make a “clone” of the repository that we just created on GitHub.

終端是計(jì)算機(jī)底層操作系統(tǒng)的接口。 這是一個(gè)命令行。 從這里我們可以做很多很酷的事情 。 但是現(xiàn)在，讓我們導(dǎo)航到要保留項(xiàng)目文件的位置，并對(duì)剛剛在GitHub上創(chuàng)建的存儲(chǔ)庫(kù)進(jìn)行“克隆”。

Give it a go with the following commands:

嘗試以下命令：

$ pwd

This stands for print working directory. As you can see above, it will show you where you are within your files.

這代表打印工作目錄。 如上所示，它將顯示文件中的位置。

$ ls

This one will give you a list of all the directories and files within your current directory. It stands for short listing as it only gives you the name of the file or directory.

這將為您提供當(dāng)前目錄中所有目錄和文件的列表。 它代表簡(jiǎn)短清單 ，因?yàn)樗粸槟峁┪募蚰夸浀拿Q。

To learn more terminal commands, check out this cheat sheet.

要了解更多終端命令，請(qǐng)查看此備忘單 。

Let's create a directory for our project

讓我們?yōu)轫?xiàng)目創(chuàng)建一個(gè)目錄

Use the following commands to create a new directory and clone your project

使用以下命令創(chuàng)建新目錄并克隆您的項(xiàng)目

$ cd Documents
$ git clone <HTTPS URL from your GitHub repository>
$ cd <name of your project repository>
$ ls

Now we have a new directory, mine is called tutorial-website, and within this directory, we can type “l(fā)s” to see that we have our README file.

現(xiàn)在，我們有了一個(gè)新目錄，我的目錄稱為tutorial-website，在該目錄中，我們可以鍵入“ ls”以查看我們是否有README文件。

步驟4：打開(kāi)代碼編輯器并創(chuàng)建項(xiàng)目文件 (Step 4 : Open your code editor and create your project files)

There are lots of different code editors and everyone has their personal preferences. For this tutorial, I will use Visual Studio Code. It’s free, it’s simple, it’s good. You can download it here.

有許多不同的代碼編輯器，每個(gè)人都有自己的個(gè)人喜好。 在本教程中，我將使用Visual Studio Code。 它是免費(fèi)的，它很簡(jiǎn)單，很好。 您可以在此處下載。

• Let’s launch VS code and open our project
  讓我們啟動(dòng)VS代碼并打開(kāi)我們的項(xiàng)目

So far we only have our README file. Let’s go to our terminal and create 2 new files, one will be our HTML file and the other will be the CSS file.

到目前為止，我們只有README文件。 讓我們轉(zhuǎn)到終端并創(chuàng)建2個(gè)新文件，一個(gè)是我們HTML文件，另一個(gè)是CSS文件。

$ ls (to make sure you are still in the right directory)
$ touch index.html
$ touch style.css

The touch command followed by the name of our file is how we can create a new file. Now let’s go back to VS code and see our files.

緊隨我們文件名之后的touch命令是我們?nèi)绾蝿?chuàng)建新文件的方法。 現(xiàn)在，讓我們回到VS代碼并查看我們的文件。

Our 2 new files have arrived in our project folder and they are highlighted green so that we know that they are new.

我們的2個(gè)新文件已到達(dá)項(xiàng)目文件夾，并以綠色突出顯示，因此我們知道它們是新文件。

第5步：編寫一些代碼！ (Step 5: Write some code!)

• let’s open our index.html file and write some code
  讓我們打開(kāi)index.html文件并編寫一些代碼

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Website</title>
</head>
<body></body>
</html>

• This boilerplate code is the structure of our Html file. In the <head> tag, we have our meta-data, which is simply information about our website.
  此樣板代碼是我們HTML文件的結(jié)構(gòu)。 在<head>標(biāo)記中，我們有我們的元數(shù)據(jù)，這只是有關(guān)我們網(wǎng)站的信息。
• In the <body> tag is where we will write our code to bring our website together
  在<body>標(biāo)記中，我們將編寫代碼以將我們的網(wǎng)站整合在一起

Let’s put some content in the <body> tag.

讓我們?cè)?lt;body>標(biāo)簽中添加一些內(nèi)容。

You can copy and paste the code below of course but I’ve found that the best way to learn how to code when you’re just getting started, is to type everything out!

您當(dāng)然可以復(fù)制和粘貼下面的代碼，但是我發(fā)現(xiàn)，剛?cè)腴T時(shí)學(xué)習(xí)編碼的最佳方法是鍵入所有內(nèi)容！

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Website</title>
</head>
<body>
<div class="main-container">
<div class="header">
<h1>Tess's Website</h1>
</div>
<div class="main-content">
<img src="portrait-drawing.png"
<p>Hi, my name is Tess and I'm writing a tutorial on how to build and deploy a simple website!</p>
</div>
</div></body>
</html>

I’ve decided to put an image on my website. Make sure to add your image to the project folder and put the file name in the <img> tag.

我決定在我的網(wǎng)站上放一張圖片。 確保將圖像添加到項(xiàng)目文件夾，并將文件名放在<img>標(biāo)記中。

This is how everything should look at this point:

這是此時(shí)一切的樣子：

How can we tell if it’s working? Simply open your index.html file with your browser.

我們?nèi)绾沃浪欠裼行?#xff1f; 只需使用瀏覽器打開(kāi)index.html文件。

This is how it’s looking so far:

到目前為止是這樣的：

步驟6：添加CSS樣式 (Step 6: Adding CSS styling)

Let’s make it look good! Html is the structure of our page, but CSS is where the magic happens to make it look just how we want it.

讓我們看起來(lái)不錯(cuò)！ HTML是頁(yè)面的結(jié)構(gòu)，而CSS恰恰是神奇的地方，它使它看起來(lái)像我們想要的樣子。

• Open the style.css file
  打開(kāi)style.css文件

Let’s write some code

讓我們寫一些代碼

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}h1 {
color: pink;
font-size: 100px;
}img {
max-width: 250px;
}.main-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}.header {
width: auto;
border-bottom: 3pt solid pink;
padding: 0px 100px;
margin-bottom: 100px;
}.main-content {
display: flex;
justify-content: space-between;
max-width: 800px;
}.main-content p {
font-size: 25px;
margin-left: 30px;
}

This is how our CSS file should look now:

這就是我們CSS文件現(xiàn)在的外觀：

Now we need to make sure our CSS file is referenced in our Html file so that our website knows to read the styles we have defined in our CSS file.

現(xiàn)在我們需要確保我們HTML文件中引用了我們CSS文件，以便我們的網(wǎng)站知道讀取我們?cè)贑SS文件中定義的樣式。

In our Html file, let’s add some code to our <head> tag.

在我們HTML文件中，讓我們向<head>標(biāo)簽添加一些代碼。

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main-container">
<div class="header">
<h1>Tess's Website</h1>
</div>
<div class="main-content">
<img src="portrait-drawing.png"
<p>Hi, my name is Tess and I'm writing a tutorial on how to build and deploy a simple website!</p>
</div>
</div></body>
</html>

Let’s go ahead and check how everything is looking now in our browser!

讓我們繼續(xù)前進(jìn)，檢查瀏覽器中現(xiàn)在的一切情況！

A bit of an improvement!

有點(diǎn)改善！

Step 7: Commit the code to GitHub

步驟7：將代碼提交到GitHub

As you work on your project, it’s important to commit your code to your GitHub repository to make sure that you never lose any of your work. The most common way to work is to commit your code every time you finish a feature.

在您處理項(xiàng)目時(shí)，將代碼提交到GitHub存儲(chǔ)庫(kù)以確保您不會(huì)丟失任何工作非常重要。 最常見(jiàn)的工作方式是在每次完成功能時(shí)提交代碼。

Let’s go back to our terminal and commit our code.

讓我們回到終端并提交我們的代碼。

$ git add .
$ git commit -m "write a message here that describes the change you've made to your project files"
$ git push

Now we can go to our GitHub repository and our files will be there.

現(xiàn)在，我們可以轉(zhuǎn)到我們的GitHub存儲(chǔ)庫(kù)，我們的文件將在那里。

We can see our new files, and we can see the commit message which should include information about the changes we are committing to our project.

我們可以看到我們的新文件，也可以看到提交消息，其中應(yīng)該包含有關(guān)我們提交給項(xiàng)目的更改的信息。

第8步：直播！ 讓我們部署我們的網(wǎng)站 (Step 8: Make it live! Let’s deploy our website)

• Sign up for a Netlify account here

  在此處注冊(cè)Netlify帳戶

• I used my GitHub login to sign-up, makes it easy and quick
  我使用GitHub登錄名進(jìn)行注冊(cè)，因此變得簡(jiǎn)單快捷

From the landing dashboard, click on “New site from Git”

在著陸儀表板中，單擊“來(lái)自Git的新站點(diǎn)”

Select GitHub for continuous deployment

選擇GitHub進(jìn)行連續(xù)部署

Chose whether you want to allow Netlify to access all your repositories, or select only specific repositories, and click “install”.

選擇是要允許Netlify訪問(wèn)您的所有存儲(chǔ)庫(kù)，還是僅選擇特定的存儲(chǔ)庫(kù)，然后單擊“安裝”。

Go back to the Netlify dashboard and select your project repository:

返回到Netlify儀表板并選擇您的項(xiàng)目存儲(chǔ)庫(kù)：

Double-check the details, and click “Deploy site”

仔細(xì)檢查詳細(xì)信息，然后單擊“部署站點(diǎn)”

We are live baby!

我們是活著的寶貝！

Your URL will consist of a strange generated Netlify domain. Here is the final product: https://mystifying-ride-b035ec.netlify.app/

您的URL將包含一個(gè)奇怪的生成的Netlify域。 這是最終產(chǎn)品： https : //mystifying-ride-b035ec.netlify.app/

You can also buy a domain name and set up your site to point to your custom domain name by following Netlify’s easy instructions here.

你也可以買一個(gè)域名，并通過(guò)以下Netlify的簡(jiǎn)易說(shuō)明你的網(wǎng)站點(diǎn)設(shè)置到您的自定義域名在這里 。

Here is the final product:

這是最終產(chǎn)品：

I hope you enjoyed following this tutorial. The fun part now is to play around with the code and make it your own!

希望您喜歡本教程。 現(xiàn)在最有趣的部分是使用代碼并自己編寫代碼！

Thanks for following along, I hope it was useful!

感謝您的關(guān)注，希望它對(duì)您有所幫助！

翻譯自: https://uxdesign.cc/how-to-code-a-simple-website-and-host-it-for-free-d3bf8b1bab37

c++編寫托管dll

總結(jié)

以上是生活随笔為你收集整理的c++编写托管dll_教程：如何编写简单的网站并免费托管的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。